摘要：樣式化組件巧妙地利用標(biāo)簽?zāi)０灏押徒M件結(jié)合在一起，使得組件跟樣式之間的界限變得模糊。由于和都是組件，因此我們可以跟其他任何組件一樣使用它們，最終的效果如下使用樣式化組件來寫樣式跟普通的寫法是一模一樣的。

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

有沒有一種更好的 CSS 方案呢？對(duì)于這個(gè)問題，社區(qū)也一直在探索，從未停止過。

本文介紹了 React 相關(guān)的三種 CSS 方案，希望能夠幫助大家在 React 路上越走越順暢。

在 React 中，一切皆為 JS 。包括看起來像是 HTML 的 JSX ，它最終也還是轉(zhuǎn)化為 JS 。CSS 也不例外，它必須被表述為 JS 對(duì)象才能在組件中使用。作為最原始的方案，它由 Facebook 官方提出，并且開啟了 CSS in JS 的熱潮。

最原始的用法如下所示：

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

從中可以看出，開發(fā)者首先要使用 JS 對(duì)象來書寫 CSS ，然后通過 style 屬性賦值給組件元素。在 React 內(nèi)部，會(huì)把這個(gè) CSS 對(duì)象轉(zhuǎn)化為樣式字符串，最終渲染的時(shí)候變成元素的行內(nèi)樣式。

這種方式有以下讓人詬病的地方：

樣式屬性名稱的命名方式與傳統(tǒng) CSS 不同

樣式屬性名稱無法自動(dòng)提示并補(bǔ)全

樣式值略有差異，如上例中的字體大小 20px 寫為 20

無法充分利用自動(dòng)補(bǔ)全瀏覽器前綴的功能，需要手動(dòng)添加前綴

無法抽離成獨(dú)立的樣式文件

無法有效復(fù)用基礎(chǔ)樣式

如果仔細(xì)看上面的代碼的話，可以發(fā)現(xiàn)樣式屬性名稱的命名并不是駝峰式命名那么簡(jiǎn)單，它還存在一些不規(guī)則的命名。比如 WebkitTransition 中的 W 是大寫的，msTransition 中的 m 則是小寫的。

為了改善這些弊端，社區(qū)中出現(xiàn)了輕量級(jí)的小工具 polished.js。

polished.js 是一個(gè) CSS in JS 的輕量級(jí)工具集。最早的版本 v1.0.1 發(fā)布于 2017.03.30 ，至今將近一年。
它總共封裝了以下五大類別的工具函數(shù)：

混合函數(shù)（Mixins）

顏色函數(shù)（Color）

快捷函數(shù)（Shorthands）

幫助函數(shù)（Helpers）

類型函數(shù)（Types）

使用這些函數(shù)可以讓我們不用直接編寫樣式屬性名稱，也在一定程度上實(shí)現(xiàn)了樣式復(fù)用。

來看下具體的例子：

import { wordWrap } from "polished";

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

// 等效于

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

或者更簡(jiǎn)單的例子：

import { size } from "polished";

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

// 等效于

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

可以看出，這工具函數(shù)確實(shí)能提高一些編碼效率。但是，記住這些工具函數(shù)也加大了學(xué)習(xí)成本，給人一種得不償失的感覺。因此，這種方案也沒能流行起來，我們?nèi)匀恍枰环N更好的 CSS 編碼方案。

polished.js 雖然并沒有流行起來，但是他們的開發(fā)團(tuán)隊(duì)卻整出了另一個(gè)更加絕妙的方案，那就是樣式化組件（Styled Components）。

樣式化組件巧妙地利用 ES6 標(biāo)簽?zāi)０灏?CSS 和組件結(jié)合在一起，使得組件跟樣式之間的界限變得模糊。這意味著，當(dāng)我們?cè)趯憳邮降臅r(shí)候，我們其實(shí)也在定義一個(gè)普通的 React 組件。反過來，開發(fā)者也可以像寫組件一樣，非常自然地寫樣式。

如果對(duì)標(biāo)簽?zāi)０暹€不太了解，可以參考ECMAScript 6 入門，里面有詳細(xì)的講解。

事不宜遲，來看看這種巧妙地寫法：

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 創(chuàng)建了 Title 和 Wrapper 兩個(gè)組件，它們會(huì)生成包含相應(yīng)樣式的

和

標(biāo)簽。由于 Title 和 Wrapper 都是組件，因此我們可以跟其他任何 React 組件一樣使用它們，最終的效果如下：

使用樣式化組件來寫樣式跟普通的 CSS 寫法是一模一樣的。也不用擔(dān)心自動(dòng)補(bǔ)全、瀏覽器前綴自動(dòng)補(bǔ)全和語法高亮等問題，這些都有很好的工具支持，適合所有主流編輯器。

比如語法高亮后長(zhǎng)這般模樣：

當(dāng)然，styled-component 還支持很多其他高級(jí)功能，比如設(shè)置樣式主題、組件復(fù)用、樣式拓展、媒體模板等，更詳細(xì)的用法請(qǐng)參考官方文檔。

除此以外，它還建立起了自己的生態(tài)，提供了豐富的基本樣式化組件、網(wǎng)格系統(tǒng)和輔助插件等等。

可以說，styled-components 讓 React 組件開發(fā)變得更加輕松愉悅！

最后，Happy Coding~