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組件 按鈕顏色並無變化，裏面的時間範圍選擇顏色確實變成了我設置的綠色