ant-Design组件库web端修改主题

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 的样式, 重复的变量名就会被最后一个版本覆盖