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样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。
在工程化中，很重要的一点就是保持各组件名称的不同，对于css来说，这点尤为重要，为了不使诸多类似的样式名称混淆，一般都会使用css编译工具，对原来的名字进行统一修改替换，确保所有名字都不重叠。
默认react是直接将样式注入到页面，并没有对name进行处理，容易产生冲突，而官方没有提供具体的主流css集成方案，社区便产生了诸多解决方案，在此对不同的方案进行简要介绍和汇总。
具体使用:
具体使用：
结果
上述各种都各有优劣，按需使用即可
其他文章可以 参考
CSS和网页分离的好处是显而易见的？那要看在什么时代。从传统 HTML 的观点来看，“内容”（HTML）和其渲染方式 (CSS)是可以分离的，例如同样的文章可以被CSS渲染到不同的设备上，例如PC、手机甚至是给视觉障碍的人用的声音设备。基于内容传播，这样分隔就是合理的。
而
今天，Web已经从相互连接的HTML变成了相互连接的 Web App。用户看到的已经不再是整个
HTML，而是由一个一个Web组件组成的应用程序窗口。此时，CSS的全局性带来的就不是方便，而可能是污染了。为了解决这个问题，Web
Component 不得不带来了 Shadow DOM 的新概念。
React Component是适应 Web App
化的，因此很自然，inline style 的作用自然就会被加强。在需要全局 CSS 的时候，你仍然可以通过为 React Component
设置 className 属性，来制定对应的 CSS Class。
Inline style也有一些限制，只能通过 CSS 声明（className）来实现，例如声明伪类属性 (a:visited)。
