antd自定义样式主题

参考网址:

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

链接: 这篇文章:(#*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组件 按钮颜色并没有变化,里面的时间范围选择颜色确实变成了我设置的绿色

     

 

 

转载于:https://www.cnblogs.com/jcz1206/p/10672196.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值