antd自定义样式主题

参考网址：

http://www.javashuo.com/article/p-zfjetvvs-ks.html

连接: 这篇文章:（#*3 and #*4）借鉴@钱锋这位童鞋，若有侵权，联系删除

个人项目是用creat-react-app@2.1.2 建立的，npm run eject暴露项目配置文件 

ant 版本是： "antd-mobile": "^2.2.6",

 

没有遇到其余文章里提到的 less必须是2.7.3如下的版本的问题

 

1. 按照官网所说，项目里须要包含以下依赖 babel-plugin-import less less-loader style-loader css-loader

npm install --save-dev babel-plugin-import less less-loader style-loader css-loader

我安装后 package.json

"babel-plugin-import": "^1.11.0",

"css-loader": "^1.0.0",

"less": "^3.9.0",

"less-loader": "^4.1.0",

"style-loader": "^0.23.1"

 

2.  package.json 增长主题色配置

 

"theme": {

　　"brand-primary": "#69bb76",

　　"brand-primary-tap": "#5ca368"

}

3. webpack.config.js

 

 

 注意：file-loader的less排除

 

ant-mobile的缺点：

　　1. 即便改了主题色，有些组件仍然用的原始主题色，好比：

　　　　TabBar的默认主题色，不是取的less中的主题色， 使用modifyVars修改主题色后，依然是原默认主题蓝色，须要在使用组件时传参数tintColor

　　　　

 　　　　

　　　　Calendar组件 按钮颜色并无变化，里面的时间范围选择颜色确实变成了我设置的绿色