React躬行记（8）——样式

　　由于React推崇组件模式，因此会要求HTML、CSS和JavaScript混合在一起，虽然这与过去的关注点分离正好相反，但是更有利于组件之间的隔离。React已将HTML用JSX封装，而对CSS只进行了较弱的封装，仅仅给出了基本的样式设置。不过，好在第三方库提供了CSS in JS的解决方案，让开发者能更高效的书写组件的样式，促进CSS工程化的发展。

一、内联样式

　　在React中的元素都包含style属性，用来定义内联样式。style的属性值是一个对象而不是一段字符串，该对象的属性就是CSS属性，但属性名要用小驼峰的方式命名，例如line-height改成lineHeight，具体如下所示。

class Btn extends React.Component {
  render() {
    let btnStyle = {
      height: 40,
      lineHeight: 1.5,
      WebkitBorderRadius: "10%"
    };
    return <button style={btnStyle}>提交</button>;
  }
}

　　在CSS中，有些属性是需要单位的，例如代码中的height，如果没有写明，那么React会自动给它们的数值加上像素（px）单位。还有一点要注意，属性名不会自动补全浏览器前缀，除了IE的ms前缀是纯小写之外，其它前缀的首字母都得是大写，例如Moz、O和Webkit。

二、CSS类

　　元素的className属性能够设置CSS类，它的值是一段字符串，如下代码所示，为<button>元素添加了一个名为btn的CSS类。

class Btn extends React.Component {
  render() {
    return <button className="btn">提交</button>;
  }
}

　　如果要动态处理（增、删或改）元素的CSS类，那么借助第三方的classnames库就能大大降低开发复杂度。下面有两个示例，完成了相同的功能，都会根据组件的active状态（布尔值）决定是否添加一个名为active的CSS类。

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>;
  }
}

　　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新增的标签模板，移除了元素和样式之间的映射，通过JavaScript完全控制了CSS，不仅支持所有的CSS特性（例如伪类、媒体查询、动画等），还能自动添加浏览器前缀，但不支持Less、Sass等CSS预处理器的语法。下面的示例创建了一个带样式的Content组件，之所以定义在render()方法之外，是为了避免缓存失效，提升渲染速度。

const Content = styled.button`
  color: red;
  appearance: none;
`;
class Btn extends React.Component {
  render() {
    return <Content>提交</Content>;
  }
}

　　在将Btn组件挂载到DOM中后，会渲染出一个包含CSS类的<button>元素，下面是生成的HTML代码。

<style>
  .iCQFTl {
    color: red;
    -webkit-appearance: none;
  }
</style>
<button class="iCQFTl">提交</button>

　　由styled-components为该按钮生成了一个名称唯一的CSS类iCQFTl，并且被内嵌到了页面中。注意，appearance是一个实验中的CSS属性，用于设置元素的默认样式，在不同浏览器中会被styled-components添加不同的前缀，例如上面CSS规则中的-webkit。

3）样式继承

　　通过构造函数styled()能够继承指定组件的样式，例如可以用下面的方式继承上例的Content组件，并额外声明背景颜色。

const BgContent = styled(Content)`
  background: yellow;
`;

4）属性传递

　　通过组件的props能够调整其自身的样式，如下代码所示，占位符内是一个箭头函数，其参数就是传递进来的props。

const AttrContent = styled.button`
  background: ${props => props.active ? "blue" : "white"}
`;
class Btn extends React.Component {
  render() {
    return <AttrContent active>提交</AttrContent>;
  }
}

5）选择器嵌套

　　styled-components使用了一个轻量级的CSS预处理器：stylis，用JavaScript实现了选择器的嵌套，如下代码所示，其中&符号表示父级选择器。

const ProContent = styled.button`
  &:hover {
    color: yellow;
  }
`;

　　限于篇幅原因，本节只列出了styled-components的几个基础功能，其他诸如主题、附加属性、Refs、动画等功能可以参考官方文档。

　　styled-components开辟了一种新的控制CSS的方式，不但保持了原生CSS的写法，而且还忽略了CSS和HTML元素之间的关联，让React组件更简单。