&emsp;&emsp;由于React推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，虽然这与过去的关注点分离正好相反，但是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开发者能更高效的书写组件的样式，促进CSS工程化的发展。 ## 一、内联样式 &emsp;&emsp;在React中的元素都包含style属性，用来定义内联样式。style的属性值是一个对象而不是一段字符串，该对象的属性就是CSS属性，但属性名要用小驼峰的方式命名，例如line-height改成lineHeight，具体如下所示。 ~~~js class Btn extends React.Component { render() { let btnStyle = { height: 40, lineHeight: 1.5, WebkitBorderRadius: "10%" }; return <button style={btnStyle}>提交</button>; } } ~~~ &emsp;&emsp;在CSS中，有些属性是需要单位的，例如代码中的height，如果没有写明，那么React会自动给它们的数值加上像素（px）单位。还有一点要注意，属性名不会自动补全浏览器前缀，除了IE的ms前缀是纯小写之外，其它前缀的首字母都得是大写，例如Moz、O和Webkit。 ## 二、CSS类 &emsp;&emsp;元素的className属性能够设置CSS类，它的值是一段字符串，如下代码所示，为元素添加了一个名为btn的CSS类。 ~~~js class Btn extends React.Component { render() { return <button className="btn">提交</button>; } } ~~~ &emsp;&emsp;如果要动态处理（增、删或改）元素的CSS类，那么借助第三方的classnames库就能大大降低开发复杂度。下面有两个示例，完成了相同的功能，都会根据组件的active状态（布尔值）决定是否添加一个名为active的CSS类。 ~~~js class Btn1 extends React.Component { render() { let className = "btn"; if (this.state.active) className += " active"; return <button className={className}>提交</button>; } } class Btn2 extends React.Component { render() { let btnClass = classNames({ btn: true, active: this.state.active }); return <button className={btnClass}>提交</button>; } } ~~~ &emsp;&emsp;Btn1组件通过条件语句和字符串拼接实现了CSS类的添加，而Btn2组件的实现方式更为优雅和清晰，只需要调用classNames()函数就行。该函数能接收一个由CSS类组成的对象，其中属性名就是类名，属性值是布尔类型的，当为true时，就添加该属性，否则忽略。 ## 三、CSS in JS &emsp;&emsp;由于前端的职能和项目规模正在扩大，因此工程化是大势所趋，而CSS的先天缺陷却在阻碍这一发展进程，目前碰到的主要问题如下所列。 &emsp;&emsp;（1）全局作用域，任意一个CSS规则都对整个页面有效，当多个CSS规则发生冲突（即样式污染）时，会根据计算出的特殊性再决定采用哪个CSS规则。虽然可以通过OOCSS、BEM等规范避免多人协作时的代码冲突，但毕竟是自选方案，需要依靠团队的执行力度，无法在语言或工具级别强制实施。 &emsp;&emsp;（2）缺少编程特性，没有变量、循环或函数等编程语言所需的语法，使得样式表有很多冗余代码。虽然社区发展的CSS预处理器（Sass、Less等）和CSS后处理器（PostCSS）有效缓解了这种状况，但是无法共享CSS处理器和JavaScript中的变量，不能满足某些特定复杂的场景。 &emsp;&emsp;（3）没有依赖管理，在引入一个组件时，应该只加载与之关联的CSS，而不是像现在这样将整个CSS文件中的样式都导入进来。目前，市面上已经出现了好多用JavaScript管理CSS依赖的第三方库，例如styled-components、css-loader等。 **1）React的应对** &emsp;&emsp;在将CSS应用到React中时，为了能有效的规避上述问题，引入了CSS in JS的编程思想，即用JavaScript编写CSS，相关的解决方案有40多种之多，可谓百家争鸣，这其中又分为抛弃CSS和沿用CSS两种。 &emsp;&emsp;第一节所讲解的style属性（内联样式）就彻底抛弃了CSS，完全用JavaScript控制CSS，不仅CSS属性的命名方式不同，而且还无法使用伪类、伪元素、媒体查询等CSS特性。 &emsp;&emsp;而CSS Modules与前者不同，依然采用JavaScript和CSS分离的写法，不仅沿用现有的CSS生态和JavaScript模块化的能力，还支持CSS预处理器的语法，并且能够零成本对接遗留项目。通过将选择器编译成唯一的CSS类名后，就能实现CSS模块化。不过，由于采用了BEM（Block Element Modifier）命名规范，因此得到的CSS类名将会比较复杂，并且没有充分利用JavaScript来控制样式，例如没有打通JavaScript和CSS中的变量。 &emsp;&emsp;其实这两种解决方案只有在适合的场景中，才能最大限度的发挥它的作用，真正意义上的银弹并不存在，本节接下来要介绍一个介于这两者之间的第三方库：styled-components。 **2）标签模板** &emsp;&emsp;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 <Content>提交</Content>; } } ~~~ &emsp;&emsp;在将Btn组件挂载到DOM中后，会渲染出一个包含CSS类的\<button>元素，下面是生成的HTML代码。 ~~~html <style> .iCQFTl { color: red; -webkit-appearance: none; } </style> <button class="iCQFTl">提交</button> ~~~ &emsp;&emsp;由styled-components为该按钮生成了一个名称唯一的CSS类iCQFTl，并且被内嵌到了页面中。注意，appearance是一个实验中的CSS属性，用于设置元素的默认样式，在不同浏览器中会被styled-components添加不同的前缀，例如上面CSS规则中的-webkit。 **3）样式继承** &emsp;&emsp;通过构造函数styled()能够继承指定组件的样式，例如可以用下面的方式继承上例的Content组件，并额外声明背景颜色。 ~~~js const BgContent = styled(Content)` background: yellow; `; ~~~ **4）属性传递** &emsp;&emsp;通过组件的props能够调整其自身的样式，如下代码所示，占位符内是一个箭头函数，其参数就是传递进来的props。 ~~~js const AttrContent = styled.button` background: ${props => props.active ? "blue" : "white"} `; class Btn extends React.Component { render() { return <AttrContent active>提交</AttrContent>; } } ~~~ **5）选择器嵌套** &emsp;&emsp;styled-components使用了一个轻量级的CSS预处理器：stylis，用JavaScript实现了选择器的嵌套，如下代码所示，其中&符号表示父级选择器。 ~~~js const ProContent = styled.button` &:hover { color: yellow; } `; ~~~ &emsp;&emsp;限于篇幅原因，本节只列出了styled-components的几个基础功能，其他诸如主题、附加属性、Refs、动画等功能可以参考[官方文档](https://www.styled-components.com/docs)。 &emsp;&emsp;styled-components开辟了一种新的控制CSS的方式，不但保持了原生CSS的写法，而且还忽略了CSS和HTML元素之间的关联，让React组件更简单。 ***** > 原文出处： [博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html) [知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。