dvajs+antd定制主题(在 create-react-app 中定制主题)

先贴一下antd官网的定制主题方案:
https://ant.design/docs/react/customize-theme-cn

所做项目使用的样式方案为定制less文件,在入口位置引入style.less文件
1.介绍下dva项目的一般结构
bulid				//  打包模块
pligins
config.js			//  代理配置(nginx)
utils.js
command
dist  //  打包文件
mock
node_modules
public
src
components		//  提高被调用的纯组件(放 echarts 图等公共组件)
constants
layouts
models			//  通常需要 connect Model 的组件都是 routes 里的组件
routes			//  页面组件
services			//  接口
sources			//  图片、图表等公共资源
styles			//  样式表
utils				//  工具 : 后台接口请求的相关工具等
index.js			//  入口文件
router.js			//  前端路由配置
package.json			//  依赖包
2.按照antd官网在 create-react-app 中定制主题的提示,配置less变量文件
@import '~antd/dist/antd.less'; // less 样式入口文件
@import 'your-theme.less'; // 用于覆盖上面定义的变量
3.your-theme.less文件为自定义主题的文件

在your-theme.less文件内配置自己喜欢的主题色

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
4.发现修改全局主色后,a标签等部分组件更改了主题,但是Button以及Switch按钮仍为默认颜色?

查阅资料了解需要修改文件配置style部分

5.修改文件配置style的部分:
[
		"import",
			{
				"libraryName": "antd",
				"libraryDirectory": "es",
				"style": "css"
			}
		]

网上查阅的资料都是将 css 改为 true,修改后并无效果,尝试将 css 改为 less 后,Button和Switch按钮等组件更改了定制的主题色。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值