css module 主题切换 |

css modules

css modules是一种流行的模块化和组合CSS的系统。通过 css modules 可以确保所有的样式能够服务于单个组件，解决CSS中的全局作用域问题。

使用方式

定义一个样式文件

1
2
3

.title {
    background-color: red;
}

使用

import styles from "./styles.css";

element.innerHTML = 
    `<h1 class="${styles.title}">
        An example heading
      </h1>`;

当开始构建的步骤时，编译器将会搜索导入的styles.css文件，然后到刚刚写的js文件中，通过styles.title使得.title class可用。构建步骤将会同时处理这些东西成为新的，分离的HTML和CSS文件，并且用一个新的字符串去替换HTML和CSS选择器的class。

通过构建工具生成的HTML就像这样

1
2
3

<h1 class="_styles__title_309571057">
    An example heading
</h1>

主题切换

新建两套主题文件

themeA.less

.h2FontColor {
    color: black;
    background-color: skyblue;
}

themeB.less

.h2FontColor {
    color: white;
    background-color: pink;
}

将两套样式存储起来

此处项目为 react ，使用状态管理库 dva 进行存储，其它状态管理库 redux ，mobx ，vux 同理。

src/models/theme.js

import themeA from '../style/theme/themeA.less';
import themeB from '../style/theme/themeB.less';

export default {
  namespace: 'theme',

  state: themeA,

  reducers: {
    toggleThemeA() {
      return themeA;
    },
    toggleThemeB() {
      return themeB;
    },
  },
};

组件中切换样式

themeDemo.js

import React, { Component } from 'react';
import { Button } from 'antd';
import { connect } from 'dva';

class ThemeDemo extends Component {
    
  handleToggleA = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'theme/toggleThemeA' });
  };

  handleToggleB = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'theme/toggleThemeB' });
  };

  render() {
    const { theme } = this.props;
    return (
      <div>
        <Button onClick={this.handleToggleA}>toggleA</Button>
        <Button onClick={this.handleToggleB}>toggleB</Button>
        <h2 className={`${theme.h2FontColor}`}>ThemeDemo</h2>
      </div>
    );
  }
}

export default connect(({ theme }) => ({ theme }))(ThemeDemo);

效果图

其它方案

通过查找 github 上 css-modules 项目，发现作者在 theming.md 文档上描述了一种方案，可自行查看。