先贴一下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按钮等组件更改了定制的主题色。