ant-Design组件库web端修改主题, 其实在官网上给了官方的方法,
在这里还是写下我定制主题的方式
**首先说下 : **我们使用的less所以如果不会使用的请看下less中文网
主要方法是, 如果antd使用了变量,则修改其原有变量, 如果没有的话, 就自己生命变量, 添加进入此次的主题版本样式中(.less文件)
我使用的是第二种方法, 使用less文件覆盖antD原有less文件, 从新写变量来更改主题,
1: 创建文件
项目所有组件都在src路径下,所以路径为
文件结构
然后说下其中的文件内容
1 : default.less
antd原样式的各种变量名
**假设个场景: ** 现在正在使用的是版本1, 需要更改版本主题2,
红色的1.less就是现在的主题样式
custom.less 就是antd中的样式,当然这个文件你需要从目录中复制出来node-modules文件中的antd文件里styles文件中
antd主题文件路径
project.less就是版本2的样式
自己添加了不少的样式变量
index.less 就是合并的生效的的样式文件
index.less
步骤是, 先antd样式在最上面 custom.less
然后版本1的在其次
然后是最后版本2的样式在第三
这样生效顺序就是 原有样式 -> 版本1 的样式 -> 版本2 的样式, 重复的变量名就会被最后一个版本覆盖
