2022-10-20 antd一键换肤

125 阅读1分钟

项目中使用的less,根据antd官方文档中方法将对应我们使用的主题风格编译为modified.css

lessc --js --modify-var="ant-prefix=custom" node_modules/antd/dist/antd.dark.less modified.css

再在生成的多套(编译多次antd.dark.less,多种风格样式)modified.css进行定制化修改

1.修改css前缀名,使用上面命令会默认前缀为custom.

2.修改主题样式

再在index.tsx中引入生成的多套样式(每套样式的风格不同,前缀名不同)

然后

image.png

通过prefixCls参数修改antd组件的样式前缀名,即可匹配不同的modifid.css样式,做到一键换肤

注:对于Modal等某些组件的样式前缀名无法通过configProvider的情况,可参考Modal组件文档底部,在Modal组件中传prefixCls参数

.......................................................................... 2022-11-4添加

某些antd组件无法更改ant的前缀是因为该组件渲染在

的外部,我们只需要找到对应渲染的DOM在其外部再包裹一层即可修改其antd前缀