React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。
那么这个时候就推荐使用CSS Modules 了CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。
具体原理可以看看阮一峰老师的博客 CSS Modules 用法教程。
在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了，详见官网。
可见create-react-app对webpack零配置的追求本文主要讲解create-react-app2.0以上版本的CSS Modules的用法：
全局样式 （默认）
命名规则: xxx.css引入方式 import 'xxx.css'
用法：<div className='styleName'>
局部样式（css modules）
注：css modules会默认给类名加上一个唯一标识符（哈希字符串），从而实现类名不重复
命名规则: xxx.module.css
引入方式：import xxx from 'xxx.module.css'
用法：<div className={xxx.styleName}>
css modules语法:
：global(.className)
CSS Modules 允许使用:global(.className)的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。代码如下：
代码语言：javascript复制.title {
color: red;
}
:global(.title) {
color: green;
}:local(.className)
CSS Modules 还提供一种显式的局部作用域语法:local(.className)，
下面代码等同于上面的代码：
代码语言：javascript复制:local(.title) {
color: red;
}
:global(.title) {
color: green;
}继承
继承在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。使用 composes 属性进行继承
代码语言：javascript复制.className {
background-color: blue;
}
.title {
composes: className;
color: red;
}组件使用样式
代码语言：javascript复制import React from 'react';
import style from './test.module.css';
export default () => {
return (
<h1 className={style.title}>
Hello World
</h1>
);
};最终会看到红色的h1在蓝色的背景上
选择器也可以继承其他CSS文件里面的规则
another.module.css.
代码语言：javascript复制className {
background-color: blue;
}其它css文件可以继承 another.module.css 里面的规则
代码语言：javascript复制.title {
composes: className from './another.module.css';
color: red;
}
