在 React 中，如果你直接在文件中引入 index.css，当父组件和子孙组件的 class 属性相同时，那么会发生 CSS 样式覆盖的问题。如果解决样式覆盖的问题呢？
手动维护 class 属性的唯一性太累了，所以使用 CSS Modules 是最方便的，CSS Modules 的出现，就是为了解决 CSS 在 React 中的样式冲突和覆盖等问题的。
CSS Modules 的功能很简单，就只是加入了局部作用域和模块依赖。
由于一般的脚手架都默认集成了 CSS Modules，比如 React 官方的脚手架：create-react-app，已经将 CSS Modules 集成进来了，我们可以直接使用。
1. 创建一个名为 index.module.css 的样式文件（CSS Modules 在 React 的用法，和普通 css 区分开）
2. 在 index.module.css 样式文件中编写 CSS 选择器和普通的 CSS 文件一样（CSS Modules 只是在编译的时候会自动转化为唯一的类名）
3. 在组件中导入样式文件
4. 通过 styles 对象访问对象中的样式名来设置样式
5. 如果想要改变全局样式，也就是使用原始的类名，则需要通过 :global() 来进行设置
6. 全局样式中，派生类选择器（父元素为 CSS Modules，而子元素为原始的类名）
7. 全局样式中，多类选择器（一个是 CSS Modules，一个是原始的类名）
网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似，但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异，我们可以定义特定的样式类名，也可以正对Html元素定义样式。差异主要在React对Css的使用上（微信react-javascript）：l 引用的差异：
传统html文件中css文件引用方式：
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式：
你可以直接采用require: require('./Category.css')
你也可以采用import: import styles from './Category.css'
l 使用差异：
传统css的使用方式是设置class: <div class=”center”>test </div>
ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。
<div className='entry'>test </div>
另外
如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。
如果你采用import styles from './Category.css'的方式，则应采用以下方式。
<div className={style.entry}>test </div>
l 最终解析文件的差异：
传统css文件一般依然保持着源码状态。
在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:
.customButton{
Width:100px
Heigth:30px
}
将转化为：
.index_customButton_23U0x{
Width:100px
Heigth:30px
}.
其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。
基本上ReactJS的css文件的使用差异到此为止了，你可以按照传统Css样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
