内联样式

内联样式是官方推荐的一种css样式的写法：

style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；

并且可以引用state中的状态来设置相关的样式；

内联样式的优点:

1.内联样式, 样式之间不会有冲突

2.可以动态获取当前state中的状态

内联样式的缺点：

1.写法上都需要使用驼峰标识

2.某些样式没有提示

3.大量的样式, 代码混乱

4.某些样式无法编写(比如伪类/伪元素)

所以官方依然是希望内联合适和普通的css来结合编写；

普通的css

普通的css我们通常会编写到一个单独的文件，之后再进行引入。

这样的编写方式和普通的网页开发中编写方式是一致的：

如果我们按照普通的网页标准去编写，那么也不会有太大的问题；

但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；

但是普通的css都属于全局的css，样式之间会相互影响；

这种编写方式最大的问题是样式之间会相互层叠掉；

css modules并不是React特有的解决方案，而是所有使用的。

如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

React的脚手架已经内置了css modules的配置：

.css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等；

之后就可以引用并且进行使用了；

css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案但是这种方案也有自己的缺陷：

引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的；

所有的className都必须使用{style.className} 的形式来编写；

不方便动态来修改某些样式，依然需要使用内联样式的方式；

如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情