模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中，这种约束很弱的，指不定哪天来个新人不知道这个，就随便命名产生冲突影响了其他的组件。
而 CSS in JS 的写法，可以解决这个问题。如果有些场景实在是需要 CSS 外联才能实现（比如 animation 的一些动画）
直接在标签上写style 或 定义一个对象写好样式然后赋值给style属性 记得大小写
通过import css|scss|sass 文件形式 使用方面跟html一样只是class要写成className 然后将定义好的样式名填进去即可
如果项目使用create-react-app的话，还可以使用另一种方法 样式文件名需要XXX.module.(s|sa|c)ss，使用的话像这样 import style from '你的样式文件目录'
<div className={style.xxx(样式名称)}>demo</div> 这样有点一好处就是不会造成样式重复问题，他在打包过程中会将className中的名称混淆
