8、样式
最后更新于：2022-04-02 06:08:36
由于React推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，虽然这与过去的关注点分离正好相反，但是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开发者能更高效的书写组件的样式，促进CSS工程化的发展。
## 一、内联样式
在React中的元素都包含style属性，用来定义内联样式。style的属性值是一个对象而不是一段字符串，该对象的属性就是CSS属性，但属性名要用小驼峰的方式命名，例如line-height改成lineHeight，具体如下所示。
~~~js
class Btn extends React.Component {
render() {
let btnStyle = {
height: 40,
lineHeight: 1.5,
WebkitBorderRadius: "10%"
};
return ;
}
}
~~~
在CSS中，有些属性是需要单位的，例如代码中的height，如果没有写明，那么React会自动给它们的数值加上像素（px）单位。还有一点要注意，属性名不会自动补全浏览器前缀，除了IE的ms前缀是纯小写之外，其它前缀的首字母都得是大写，例如Moz、O和Webkit。
## 二、CSS类
元素的className属性能够设置CSS类，它的值是一段字符串，如下代码所示，为元素添加了一个名为btn的CSS类。
~~~js
class Btn extends React.Component {
render() {
return ;
}
}
~~~
如果要动态处理（增、删或改）元素的CSS类，那么借助第三方的classnames库就能大大降低开发复杂度。下面有两个示例，完成了相同的功能，都会根据组件的active状态（布尔值）决定是否添加一个名为active的CSS类。
~~~js
class Btn1 extends React.Component {
render() {
let className = "btn";
if (this.state.active) className += " active";
return ;
}
}
class Btn2 extends React.Component {
render() {
let btnClass = classNames({
btn: true,
active: this.state.active
});
return ;
}
}
~~~
Btn1组件通过条件语句和字符串拼接实现了CSS类的添加，而Btn2组件的实现方式更为优雅和清晰，只需要调用classNames()函数就行。该函数能接收一个由CSS类组成的对象，其中属性名就是类名，属性值是布尔类型的，当为true时，就添加该属性，否则忽略。
## 三、CSS in JS
由于前端的职能和项目规模正在扩大，因此工程化是大势所趋，而CSS的先天缺陷却在阻碍这一发展进程，目前碰到的主要问题如下所列。
（1）全局作用域，任意一个CSS规则都对整个页面有效，当多个CSS规则发生冲突（即样式污染）时，会根据计算出的特殊性再决定采用哪个CSS规则。虽然可以通过OOCSS、BEM等规范避免多人协作时的代码冲突，但毕竟是自选方案，需要依靠团队的执行力度，无法在语言或工具级别强制实施。
（2）缺少编程特性，没有变量、循环或函数等编程语言所需的语法，使得样式表有很多冗余代码。虽然社区发展的CSS预处理器（Sass、Less等）和CSS后处理器（PostCSS）有效缓解了这种状况，但是无法共享CSS处理器和JavaScript中的变量，不能满足某些特定复杂的场景。
（3）没有依赖管理，在引入一个组件时，应该只加载与之关联的CSS，而不是像现在这样将整个CSS文件中的样式都导入进来。目前，市面上已经出现了好多用JavaScript管理CSS依赖的第三方库，例如styled-components、css-loader等。
**1）React的应对**
在将CSS应用到React中时，为了能有效的规避上述问题，引入了CSS in JS的编程思想，即用JavaScript编写CSS，相关的解决方案有40多种之多，可谓百家争鸣，这其中又分为抛弃CSS和沿用CSS两种。
第一节所讲解的style属性（内联样式）就彻底抛弃了CSS，完全用JavaScript控制CSS，不仅CSS属性的命名方式不同，而且还无法使用伪类、伪元素、媒体查询等CSS特性。
而CSS Modules与前者不同，依然采用JavaScript和CSS分离的写法，不仅沿用现有的CSS生态和JavaScript模块化的能力，还支持CSS预处理器的语法，并且能够零成本对接遗留项目。通过将选择器编译成唯一的CSS类名后，就能实现CSS模块化。不过，由于采用了BEM（Block Element Modifier）命名规范，因此得到的CSS类名将会比较复杂，并且没有充分利用JavaScript来控制样式，例如没有打通JavaScript和CSS中的变量。
其实这两种解决方案只有在适合的场景中，才能最大限度的发挥它的作用，真正意义上的银弹并不存在，本节接下来要介绍一个介于这两者之间的第三方库：styled-components。
**2）标签模板**
styled-components的实现基于ES6新增的[标签模板](https://www.cnblogs.com/strick/p/10173486.html)，移除了元素和样式之间的映射，通过JavaScript完全控制了CSS，不仅支持所有的CSS特性（例如伪类、媒体查询、动画等），还能自动添加浏览器前缀，但不支持Less、Sass等CSS预处理器的语法。下面的示例创建了一个带样式的Content组件，之所以定义在render()方法之外，是为了避免缓存失效，提升渲染速度。
~~~js
const Content = styled.button`
color: red;
appearance: none;
`;
class Btn extends React.Component {
render() {
return 提交 ;
}
}
~~~
在将Btn组件挂载到DOM中后，会渲染出一个包含CSS类的\
';