如何愉悅地寫 React 樣式

在 React 中寫 CSS 一直是你們以爲不太爽的地方。

有沒有一種更好的 CSS 方案呢？對於這個問題，社區也一直在探索，從未中止過。

本文介紹了 React 相關的三種 CSS 方案，但願可以幫助你們在 React 路上越走越順暢。

CSS as Object

在 React 中，一切皆爲 JS 。包括看起來像是 HTML 的 JSX ，它最終也仍是轉化爲 JS 。CSS 也不例外，它必須被表述爲 JS 對象才能在組件中使用。做爲最原始的方案，它由 Facebook 官方提出，而且開啓了 CSS in JS 的熱潮。

最原始的用法以下所示：

const divStyle = {
  color: 'blue',
  fontSize: 20,
  WebkitTransition: 'all',
  msTransition: 'all',
};
const HelloWorldComponent = () => (
  <div style={divStyle}>Hello World!</div>
);

從中能夠看出，開發者首先要使用 JS 對象來書寫 CSS ，而後經過 style 屬性賦值給組件元素。在 React 內部，會把這個 CSS 對象轉化爲樣式字符串，最終渲染的時候變成元素的行內樣式。

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

• 樣式屬性名稱的命名方式與傳統 CSS 不一樣
• 樣式屬性名稱沒法自動提示並補全
• 樣式值略有差別，如上例中的字體大小 20px 寫爲 20
• 沒法充分利用自動補全瀏覽器前綴的功能，須要手動添加前綴
• 沒法抽離成獨立的樣式文件
• 沒法有效複用基礎樣式

若是仔細看上面的代碼的話，能夠發現樣式屬性名稱的命名並非駝峯式命名那麼簡單，它還存在一些不規則的命名。好比 WebkitTransition 中的 W 是大寫的，msTransition 中的 m 則是小寫的。

爲了改善這些弊端，社區中出現了輕量級的小工具 polished.js。

CSS as Function

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 編碼方案。

CSS as Component

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(
  <Wrapper>
    <Title>
      Hello World, this is my first styled component!
    </Title>
  </Wrapper>,
  document.getElementById('root')
);

上面咱們前後使用 styled.h1 和 styled.section 建立了 Title 和 Wrapper 兩個組件，它們會生成包含相應樣式的 <h1> 和 <section> 標籤。因爲 Title 和 Wrapper 都是組件，所以咱們能夠跟其餘任何 React 組件同樣使用它們，最終的效果以下：

使用樣式化組件來寫樣式跟普通的 CSS 寫法是如出一轍的。也不用擔憂自動補全、瀏覽器前綴自動補全和語法高亮等問題，這些都有很好的工具支持，適合全部主流編輯器。

好比語法高亮後長這般模樣：

固然，styled-component 還支持不少其餘高級功能，好比設置樣式主題、組件複用、樣式拓展、媒體模板等，更詳細的用法請參考官方文檔。

除此之外，它還創建起了本身的生態，提供了豐富的基本樣式化組件、網格系統和輔助插件等等。

能夠說，styled-components 讓 React 組件開發變得更加輕鬆愉悅！

最後，Happy Coding~