您的当前位置:首页>全部文章>文章详情

【AntDesignPro】Ant Design Pro学习记录—默认主题配色修改

CrazyPanda发表于:2023-11-28 21:26:59浏览:785次TAG:

版本: Ant Design Pro V5

先参考下官网定制主题 - Ant Design

再参考这篇文章antd pro 修改全局样式_tankpanv的博客-CSDN博客_antd修改全局样式

最后自己实验:

第一步,在config.ts文件中配置

theme: {
    'primary-color': defaultSettings.primaryColor,
  },

这种配置需要修改defaultSettings.ts文件的primaryColor,

或者直接配置

theme: {
    'primary-color': '#25ba83',
  },

第二步,在global.less中配置,先引入@import '~antd/dist/antd.less';

@import '~antd/es/style/variable.less';
//新引入
@import '~antd/dist/antd.less';

然后在global.less最后加上@primary-color: #25ba83;使自己的样式覆盖原样式。

@primary-color: #25ba83;

如果没有加入@import '~antd/dist/antd.less';样式会覆盖不全,按钮等组件触摸和点击时样式不会改变,而且经过多次测试,如果加入了@import '~antd/dist/antd.less';第一步就必须配置上,否则直接编译报错(暂时没搞明白为什么会报错)

这样两个配置后,主题颜色就改完了,如果有其他样式要修改,也可以在global.less直接修改,如下图官网给出的配置都可以重新定义

1.png



猜你喜欢

【AntDesignPro】Ant Design Pro学习记录—DrawerForm的使用
在AntDesignPro中,ModalForm和DrawerForm是我最常用的两个表单组件,配置上,他们有很多相同的地方,也有差异的地方,相比较而言,DrawerForm我使用的更多。ModalForm<ModalForm         title={标题}         width={600}   &n
发表于:2024-05-17 浏览:468 TAG:
【React】如何在 React 类中声明常量?
使用 react 开发应用程序时,有必要声明常量来存储在组件或应用程序的整个生命周期中保持不变的值。常量可以帮助提高代码可读性,提供管理共享值的中心位置,并增强可维护性。在本文中,我们将探讨如何在 react 类组件中声明常量。导入 React首先,我们假设您已经设置了 React 环境并且有一个可供使用的类组件。在声明常量之前,请确保您已导入必要的库。这包括导入 React,它是在 React 中构建用户界面的核心库。import React from '
发表于:2024-04-16 浏览:302 TAG:
【AntDesignPro】Ant Design Pro学习记录—ProTable的使用(一)
目录一、关于ProTable二、使用步骤1.新建页面2.修改接口3.接口调用4.数据显示和检索1)不同类型内容显示2)列表检索3)列表内容样式设置5.其它1)render的简单使用2)图片点击预览3)翻页总结前言因为项目需要,确定了Ant Design Pro框架来开发后台管理端,刚接触这套框架,而且配套的资料真的很少,只能基于官方demo和网上不完整的学习经验一次次尝试,终于有个像样的结果,记录一下研究学习的成果,也给需要的同学一些帮助。本次学习研究基于Ant Design Pro V5版本,
发表于:2023-11-28 浏览:836 TAG: #前端 #antd #AntDesignPro
【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(二)
 目录一、ModalForm高度设置二、ModalForm点击阴影背景,不隐藏弹框三、ProFormSelect联动四、ProFormText关联赋值一、ModalForm高度设置在modalProps中设置bodyStyle:{height:500,overflowY:'scroll'}编辑效果如下:编辑二、ModalForm点击阴影背景,不隐藏弹框同样在modalProps里面,配置maskClosable: false,就可以实现点击弹框外阴影,不隐藏弹框<
发表于:2023-11-28 浏览:1193 TAG:
【React】16 个实用的 React 库
Web开发中,经常会需要使用第三方库来提高开发效率。今天给大家分享16个非常实用的React第三方库,使用好这些库你可以更轻松、更快速的开发项目,让我们一起看看吧!1.react-hook-formReact-hook-form 是一个用于构建 Web 应用程序的表单库。它支持多种表单类型,包括输入框、下拉框、单选框、多选框等。它还提供了一些自定义选项,可以自定义表单的外观和行为。官方地址:https://react-hook-form.com/2.rechartsRecharts 是一个用于构
发表于:2024-04-01 浏览:303 TAG:
【AntDesignPro】L7Plot地理可视化组件的使用
L7Plot介绍L7Plot 基于 L7 实现的开箱即用地理空间数据可视化图表库L7Plot 专注于地理可视化图表。以声明配置式的方式,降低用户使用成本;以常见地理图表分类的方式,降低用户选择成本;内部集成全国行政区域数据,降低用户使用地理数据心智;支持多图层及多图表层叠,方便用户定制复杂的业务场景;L7Plot 专注于地理数据可视化展示,不会涉及数据编辑能力。前言项目需要,使用antdesignpro做前端,并绘制可视化大屏,回执地图组件,于是使用了L7Plot。功能目的绘
发表于:2023-12-14 浏览:670 TAG:
【React】React前端图片裁剪组件
前端图片裁剪组件前端图片裁剪已经是很常见的需求了,在 react 的项目中推荐使用 react-image-crop 库,能勾勒出裁剪区域、宽高比例限制等等,但是还是有很多东西需要我们来做的,比如以下问题:react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop"; import "react-image-crop/dist/Re
发表于:2024-03-29 浏览:309 TAG:
【AntDesignPro】使用高德地图设置考勤区域
参考高德开放平台https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-react功能要求:使用AntDesignPro开发系统管理端,考勤模块需要设置APP考勤打卡区域,需要页面显示地图定位并设置考勤范围(地图上画圈),以便APP在画圈范围内打卡使用。1、 准备2、 下载react类组件代码参考官网流程,可正常加载出地图组件,下面是我的页面和组件文件组件文件3、 安装并引入AmAP Loadernpm i @ama
发表于:2023-12-14 浏览:761 TAG:
【AntDesignPro】Ant Design Pro学习记录—前后端分离跨域设置,解决跨域session不一致
目录前言一、为什么跨域二、跨域配置三、跨域请求session不一致前言第一次做前后端分离,也是踩了很多坑,记录一下AntDesignPro跨域解决的方式。服务器系统使用Nginx,服务端使用thinkphp6。AntDesignPro正式build放到服务器上后,提示登录成功,但一直登录不上,后来发现是跨域session不同导致的,登录的时候session和登录成功后session的id不同,导致提示登录成功,就是登录不进去的情况。一、为什么跨域不想知道为什么要跨域,只想知道怎么解决。二、跨域配
发表于:2023-11-28 浏览:564 TAG:
【AntDesignPro】Ant Design Pro学习记录—ModalForm的使用(一)
目录前言一、ModalForm销毁二、ModalForm编辑赋值三、ProFormUploadButton赋值四、其它总结前言使用了AntDesignPro,仿照TableList创建了自己的列表,列表添加编辑确成了困扰,添加编辑使用了ModalForm,有两个问题,一个使用后,页面数据无法清除,再点弹框还是原来的数据,第二个编辑的时候,初始数据赋值问题。AntDesignPro版本V5,开发工具VsCode。一、ModalForm销毁参考ant design的关闭ModalForm和Modal
发表于:2023-11-28 浏览:642 TAG: