React中的样式

在组件化中选择合适的css解决方案应该符合以下条件：
1.可以编写局部css，css具备自己的作用域，不会随意污染其他组件内的元素；
2.可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
3.支持所有的css特性，伪类，动画，媒体查询等；
4.编写起来简洁方便，最好符合一贯的css风格特点；

内联样式

style接受一个采用小驼峰命名属性的JS对象，而不是CSS字符串；
并且可以引用state中的状态来设置相关的样式；

优点：
样式之间不会有冲突；
可以动态获取当前state中的状态；

缺点：
写法上都需要使用驼峰标识；
某些样式没有提示；
大量的样式，代码混乱；
某些样式无法编写，必须伪类，伪元素；

普通css

css modules

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。但是，如果在其他项目中使用，需要自己进行配置，比如配置webpack.config.js中的modules:true等。
React的脚手架已经内置了css modules的配置：
.css/.less/.scss等样式都修改成.modules.css/.modules.less/.modules.scss等之后就可以引用并且进行使用了。
css modules解决了局部作用域的问题。

缺陷：
引用的类名，不能使用连接符，在JS中是不识别的；
所有的className都必须使用{style.className}的形式来编写；
不方便动态来修改某些样式，依然需要使用内联样式的方式；

css in JS

"css in JS"是指一种模式，其中css由JS生成而不是在外部文件中定义；
此功能并不是React的一部分，而是由第三方库提供，React对样式如何定义并没有明确态度；
事实上css in js的模式就是一种将样式也写入到JS中的方式，并且可以方便的使用JS的状态；

yarn add styled-components
安装插件 vscode-styled-components

模板字符串