摘要：样式化组件巧妙地利用标签模板把和组件结合在一起，使得组件跟样式之间的界限变得模糊。由于和都是组件，因此我们可以跟其他任何组件一样使用它们，最终的效果如下使用样式化组件来写样式跟普通的写法是一模一样的。

在 React 中写 CSS 一直是大家觉得不太爽的地方。

有没有一种更好的 CSS 方案呢？对于这个问题，社区也一直在探索，从未停止过。

本文介绍了 React 相关的三种 CSS 方案，希望能够帮助大家在 React 路上越走越顺畅。

在 React 中，一切皆为 JS 。包括看起来像是 HTML 的 JSX ，它最终也还是转化为 JS 。CSS 也不例外，它必须被表述为 JS 对象才能在组件中使用。作为最原始的方案，它由 Facebook 官方提出，并且开启了 CSS in JS 的热潮。

最原始的用法如下所示：

const divStyle = {
  color: "blue",
  fontSize: 20,
  WebkitTransition: "all",
  msTransition: "all",
};
const HelloWorldComponent = () => (
  
Hello World!
);

从中可以看出，开发者首先要使用 JS 对象来书写 CSS ，然后通过 style 属性赋值给组件元素。在 React 内部，会把这个 CSS 对象转化为样式字符串，最终渲染的时候变成元素的行内样式。

这种方式有以下让人诟病的地方：

样式属性名称的命名方式与传统 CSS 不同

样式属性名称无法自动提示并补全

样式值略有差异，如上例中的字体大小 20px 写为 20

无法充分利用自动补全浏览器前缀的功能，需要手动添加前缀

无法抽离成独立的样式文件

无法有效复用基础样式

如果仔细看上面的代码的话，可以发现样式属性名称的命名并不是驼峰式命名那么简单，它还存在一些不规则的命名。比如 WebkitTransition 中的 W 是大写的，msTransition 中的 m 则是小写的。

为了改善这些弊端，社区中出现了轻量级的小工具 polished.js。

polished.js 是一个 CSS in JS 的轻量级工具集。最早的版本 v1.0.1 发布于 2017.03.30 ，至今将近一年。
它总共封装了以下五大类别的工具函数：

混合函数（Mixins）

颜色函数（Color）

快捷函数（Shorthands）

帮助函数（Helpers）

类型函数（Types）

使用这些函数可以让我们不用直接编写样式属性名称，也在一定程度上实现了样式复用。

来看下具体的例子：

import { wordWrap } from "polished";

const style = {
  ...wordWrap("break-word")
}

// 等效于

const style = {
  overflowWrap: "break-word",
  wordWrap: "break-word",
  wordBreak: "break-all",
}

或者更简单的例子：

import { size } from "polished";

const style = {
  ...size("300px", "250px")
}

// 等效于

const style = {
  height: "300px",
  width: "250px"
}

可以看出，这工具函数确实能提高一些编码效率。但是，记住这些工具函数也加大了学习成本，给人一种得不偿失的感觉。因此，这种方案也没能流行起来，我们仍然需要一种更好的 CSS 编码方案。

polished.js 虽然并没有流行起来，但是他们的开发团队却整出了另一个更加绝妙的方案，那就是样式化组件（Styled Components）。

样式化组件巧妙地利用 ES6 标签模板把 CSS 和组件结合在一起，使得组件跟样式之间的界限变得模糊。这意味着，当我们在写样式的时候，我们其实也在定义一个普通的 React 组件。反过来，开发者也可以像写组件一样，非常自然地写样式。

如果对标签模板还不太了解，可以参考ECMAScript 6 入门，里面有详细的讲解。

事不宜迟，来看看这种巧妙地写法：

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  
    
  ,
  document.getElementById("root")
);

上面我们先后使用 styled.h1 和 styled.section 创建了 Title 和 Wrapper 两个组件，它们会生成包含相应样式的

和

标签。由于 Title 和 Wrapper 都是组件，因此我们可以跟其他任何 React 组件一样使用它们，最终的效果如下：

使用样式化组件来写样式跟普通的 CSS 写法是一模一样的。也不用担心自动补全、浏览器前缀自动补全和语法高亮等问题，这些都有很好的工具支持，适合所有主流编辑器。

比如语法高亮后长这般模样：

当然，styled-component 还支持很多其他高级功能，比如设置样式主题、组件复用、样式拓展、媒体模板等，更详细的用法请参考官方文档。

除此以外，它还建立起了自己的生态，提供了丰富的基本样式化组件、网格系统和辅助插件等等。

可以说，styled-components 让 React 组件开发变得更加轻松愉悦！

最后，Happy Coding~