参考网址:

https://blog.csdn.net/focusdroid/article/details/85381042

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

链接: 这篇文章:(#*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   antd自定义样式主题 随笔 第1张

 

antd自定义样式主题 随笔 第2张

 注意:file-loader的less排除

antd自定义样式主题 随笔 第3张

 

ant-mobile的缺点:

  1. 即使改了主题色,有些组件仍然用的原始主题色,比如:     TabBar的默认主题色,不是取的less中的主题色, 使用modifyVars修改主题色后,依然是原默认主题蓝色,需要在使用组件时传参数tintColor      antd自定义样式主题 随笔 第4张

     

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

     antd自定义样式主题 随笔 第5张

 

 
扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄