前提

項(xiàng)目是采用create-react-app 搭建的腳手架工程。

背景

react 組件之間會(huì)出現(xiàn)css樣式污染的問題，vue組件之間解決此問題的方式是給<style></style>加上scoped屬性值，如何處理react樣式污染問題？

調(diào)查 (CSS Modules)

CSS模塊就是所有的類名都只有局部作用域的CSS文件。CSS Modules既不是官方標(biāo)準(zhǔn)，也不是瀏覽器的特性，而是在構(gòu)建步驟（例如使用Webpack或Browserify）中對(duì)CSS類名選擇器限定作用域的一種方式（通過hash實(shí)現(xiàn)類似于命名空間的方法）。
原理：在使用CSS模塊時(shí)，類名是動(dòng)態(tài)生成的，唯一的，并準(zhǔn)確對(duì)應(yīng)到源文件中的各個(gè)類的樣式。

用法

第一種用法：

編寫一個(gè) css 文件：Button.module.css （關(guān)鍵在于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.在命令行運(yùn)行 npm run eject 命令
2.運(yùn)行完成之后，打開 config 目錄下的 webpack.config.js 文件，找到 test: cssRegex 這一行
3.在 use 屬性執(zhí)行的方法中添加 modules: true，如下圖：

image

4.react組件中的使用和第一個(gè)方式相同。