Ant Design使用css切换问题
当想通过开关来控制主题颜色时，就必须控制css的变化，现就记录使用Ant Design切换主题过程中发现的一些问题。
切换主题的方法：
1、绑定一个自定义属性
通过绑定一个自定义属性，一键改变html的整体样式。但缺点也很明显，他仅适用于原生的样式(css全部由自己定义)，不适合在UI框架中使用；
function addSkin(checked) {
const html = document.getElementsByTagName('html')[0];
html.dataset.theme = checked ? 'dark' : 'light';
html.className = checked ? 'dark' : '';
}2、css模块化
配置webpack的css模块化，通过import方式导入css，再通过xxx.style的方式来设置css。缺点是，className的命名不允许出现横杠(-)的命名方式，限制比较大，不利于后期维护。
{
test:/\.css$/,
use: [{ loader: MiniCssExtractPlugin.loader,},
{ loader: "css-loader", options: { modules:true }},
{ loader: "postcss-loader"}
]
},3、Ant Design主题方案
Ant Design框架自带的主题方案 定制主题 - Ant Design ，缺点，不适合主题切换
ConfigProvider.config({
theme: {
bodyBackground: 'rgb(20,20,20)',
primaryColor: '#25b864', // 全局主色
},
});4、css in js
使用styled-components库
import styled from 'styled-components'
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// 相当于 const Title = styled.h1(xx)
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
render () {
return (
<Wrapper>
<Title>Hello styled-components</Title>
</Wrapper>
)
}ant design中css样式覆盖问题
在ant design中想要覆盖原生组件的样式，因为CSS modules 的使用会使得class的名字被重新编译而没有效果；对此我们可以使用全局css来达到目的。写法如下：
.override-ant-btn {
:global(.ant-btn) {
border-radius: 16px;
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
