由於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元件更簡單。

&n