组件式开发选择合适的css解决方案尤为重要
通常会遵循以下规则：
可以编写局部css，不会随意污染其他组件内的原生；
可以编写动态的css，可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
支持所有的css特性：伪类、动画、媒体查询等；
编写起来简洁方便、最好符合一贯的css风格特点
在这一方面，vue使用css起来更为简洁：
通过 style 标签编写样式
scoped 属性决定编写的样式是否局部有效
lang 属性设置预处理器
内联样式风格的方式来根据最新状态设置和改变css
而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊
二、方式
常见的CSS引入方式有以下：
**
- 在组件内直接使用
在组件内直接使用 直接在组件中书写css样式，通过style属性直接引入** 上面可以看到，css属性需要转换成驼峰写法 这种方式优点： 内联样式, 样式之间不会有冲突 可以动态获取当前state中的状态 缺点： 写法上都需要使用驼峰标识 某些样式没有提示 大量的样式, 代码混乱 某些样式无法编写(比如伪类/伪元素)
- 组件中引入 .css 文件
这种方式存在不好的地方在于样式是全局生效，样式之间会互相影响 • 1
- 组件中引入 .module.css 文件
将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。 不会影响当前组件的后代组件 这种方式是webpack特工的方案，只需要配置webpack配置文件中modules:true即可 这种方式能够解决局部作用域问题，但也有一定的缺陷： 引用的类名，不能使用连接符(.xxx-xx)，在 JavaScript 中是不识别的 所有的 className 都必须使用 {style.className} 的形式来编写 不方便动态来修改某些样式，依然需要使用内联样式的方式；
- CSS in JS
CSS-in-JS， 是指一种模式，其中CSS由 JavaScript生成而不是在外部文件中定义 此功能并不是 React 的一部分，而是由第三方库提供，例如： styled-components emotion glamorous 下面主要看看styled-components的基本使用 本质是通过函数的调用，最终创建出一个组件： 这个组件会被自动添加上一个不重复的class styled-components会给该class添加相关的样式.
三、区别
通过上面四种样式的引入，可以看到：
在组件内直接使用css该方式编写方便，容易能够根据状态修改样式属性，但是大量的演示编写容易导致代码混乱
组件中引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会层叠
引入.module.css 文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写
通过css in js 这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等
