react CSS Modules

前提

项目是采用create-react-app 搭建的脚手架工程。

背景

react 组件之间会出现css样式污染的问题，vue组件之间解决此问题的方式是给<style></style>加上scoped属性值，如何处理react样式污染问题？

调查 (CSS Modules)

CSS模块就是所有的类名都只有局部作用域的CSS文件。CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤（例如使用Webpack或Browserify）中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。
原理：在使用CSS模块时，类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。

用法

第一种用法：

编写一个 css 文件：Button.module.css （关键在于xxx.module.css格式)

.error {
    background-color: red;
}

组件引用

import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入

class Button extends Component {
  render() {
    // 使用方式为模块名.类名
    return <button className={styles.error}>Error Button</button>;
  }
}

第二种用法：
1.在命令行运行 npm run eject 命令
2.运行完成之后，打开 config 目录下的 webpack.config.js 文件，找到 test: cssRegex 这一行
3.在 use 属性执行的方法中添加 modules: true，如下图：

image

4.react组件中的使用和第一个方式相同。