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库 ，参考文章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-componentsTitle>
            Wrapper>
        )
    }