前提
項(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è)方式相同撞羽。
