react与vue不同，vue可以通过在script中设置scoped来限制样式的生效范围，不至于样式污染,

CSS 的局部作用域解决了大问题。在w3c 规范中，CSS 始终是「全局的」。在传统的 web 开发中，最为头痛的莫过于处理 CSS 问题。因为全局性，明明定义了样式，但就是不生效，原因可能是被其他样式定义所强制覆盖。接手老项目更是噩梦，改对了一个地方的样式，却把另外许多地方的样式打乱。

CSS modules 是从工具层面给出的一套生成局部 CSS 的规范，本质还是生成全局唯一的 CSS 定义。webpack 实现了这套规范。

如果我们是直接安装的脚手架我们需要先把配置文件暴露出来，建议我们以后开发的时候也暴露出来好些

安装脚手架后我们的文件格式是这样的

运行这个命令暴露所有配置文件

npm run eject

这样就暴露了其它的文件

言归正传现在我们来使用CSS Modules 很简单的

首先在webpack上进行配置启用CSS Modules：

{
   test: /\.css$/,
   loaders: [
      'style-loader',
      'css-loader?modules'
}

图例：

接着创建一个style.css的文件，内容为：

.box{
    height: 200px;
    width: 100%;
    background: red;
}

接下来使用这个样式，在index.jsx中：

import React, { Component } from 'react';
import style from './style.css';
 
class Header extends Component{
    render() {
        return(
            <div className={style.box}>
                www
            </div>
        )   
    }
}

export default Header;

这样就不会出现样式污染了