目录：
1 React中CSS的概述
2 内联样式CSS写法
3 普通CSS文件写法
4 CSS Module写法
5 CSS in JS解决方案
6 classnames库使用
一、React中CSS的概述
对css的要求有：1、有自己的作用域；2、能够使用js中的变量控制css的值；3、支持所有css特性；4、编写起来必须和原来的css一样
二、内联样式CSS写法（了解）
内联样式就是标签上有style属性，可以通过字符串模板来做到动态数据。
三、普通CSS文件写法（了解）
和普通的写css样式并引入是一样的，直接import引入，缺点就是全局性的，只要css类名一样就会出现效果，也可能会覆盖效果。
四、CSS Module写法（了解）
react脚手架已经内置了css modules，不用自己配置了
import引入方式发生变化，className类名的类名需要从你import引入的命名来设置
缺点是不能再css文件里面写入有 -（杠）的类名，因为在js里面不识别，所以必须使用小驼峰的类名
五、CSS in JS解决方案（重要）
（一）styled-components的使用方法：
1、先安装styled-components
npm install styled-components2、安装styled-components插件，方便在js文件里面写css样式
3、创建一个任意后缀为js的文件并编写css样式
需要import引入styled-components，并制定输出代替div的组件名字（下图设置名字叫AppWrapper），在模板字符串中编写普通css样式。样式可以使用&号，并添加伪类。
4、在需要使用css的jsx文件里面import引入styled-components，并替换掉选择好的标签。
5、如果内部样式比较复杂，我们可以选择抽取（下图就是抽取了className为section的div标签进行抽取成另外一个组件，然后在应用styled-component的js文件里面编写css）
抽取
最后编写成另外一个样式组件
（二）样式组件可以接收外部传进来的props，其实这里就是可以很轻松的让css样式的值受到js的控制
1、 在父组件给SectionWrapper样式组件里面传递参数，应用styled-component的js文件里面使用函数的方法来获取props参数
2、如果父组件没有给样式组件添加参数，那么我们可以给样式组件添加默认值，方法就是在div后面添加.sttrs（{}）
下图写法是错误的，你想判断 函数 || "blue" 当函数不输出东西的时候输出blue，但是函数肯定会输出东西，所以blue永远取不到
（三）我们可以创建一个专门存储全局变量的js文件，这个文件引入到样式组件的文件里面就可以做到全局管理变量了。和less和scss的全局css变量差不多
1、创建一个存储全局变量的js文件，这里就叫做variables.js
2、编写变量
3、样式组件使用全局变量 ，import引入全局变量js文件，再通过模板字符串${变量名}
（四）全局变量的设置也可以通过设置主题来实现，必须用在顶层并且变量的内容必须是对象类型。
使用方法是必须用在顶层，并且传递的是对象类型
在app下的所有组件都可以使用主题给的变量
（五）继承
npm install styled-components
六、classnames库使用
需要安装
npm install classnames需要引入包
