项目中使用的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中引入生成的多套样式(每套样式的风格不同,前缀名不同)
然后
通过prefixCls参数修改antd组件的样式前缀名,即可匹配不同的modifid.css样式,做到一键换肤
注:对于Modal等某些组件的样式前缀名无法通过configProvider的情况,可参考Modal组件文档底部,在Modal组件中传prefixCls参数
.......................................................................... 2022-11-4添加
某些antd组件无法更改ant的前缀是因为该组件渲染在
的外部,我们只需要找到对应渲染的DOM在其外部再包裹一层即可修改其antd前缀