源自：coderwhy

前面說過，整個前端已經是元件化的天下，而CSS的設計就不是為元件化而生的，所以在目前元件化的框架中都在需要一種合適的CSS解決方案。

一. React中的css方案1.1. react中的css

事實上，css一直是React的痛點，也是被很多開發者吐槽、詬病的一個點。

在元件化中選擇合適的CSS解決方案應該符合以下條件：

可以編寫區域性css：css具備自己的具備作用域，不會隨意汙染其他元件內的原生；可以編寫動態的css：可以獲取當前元件的一些狀態，根據狀態的變化生成不同的css樣式；支援所有的css特性：偽類、動畫、媒體查詢等；編寫起來簡潔方便、最好符合一貫的css風格特點；等等...

在這一點上，Vue做的要遠遠好於React：

Vue通過在.vue檔案中編寫 <style><style> 標籤來編寫自己的樣式；通過是否新增 scoped 屬性來決定編寫的樣式是全域性有效還是區域性有效；通過 lang 屬性來設定你喜歡的 less、sass等前處理器；通過內聯樣式風格的方式來根據最新狀態設定和改變css；等等...

Vue在CSS上雖然不能稱之為完美，但是已經足夠簡潔、自然、方便了，至少統一的樣式風格不會出現多個開發人員、多個專案採用不一樣的樣式風格。

相比而言，React官方並沒有給出在React中統一的樣式風格：

由此，從普通的css，到css modules，再到css in js，有幾十種不同的解決方案，上百個不同的庫；大家一直在尋找最好的或者說最適合自己的CSS方案，但是到目前為止也沒有統一的方案；

在這篇文章中，我會介紹挑選四種解決方案來介紹：

方案一：內聯樣式的寫法；方案二：普通的css寫法；方案三：css modules；方案四：css in js（styled-components）；1.2. 普通的解決方案1.2.1. 內聯樣式

內聯樣式是官方推薦的一種css樣式的寫法：

style 接受一個採用小駝峰命名屬性的 JavaScript 物件，，而不是 CSS 字串；並且可以引用state中的狀態來設定相關的樣式；

export default class App extends PureComponent {  constructor(props) {    super(props);    this.state = {      titleColor: "red"    }  }  render() {    return (      <div>        <h2 style={{color: this.state.titleColor, fontSize: "20px"}}>我是App標題</h2>        <p style={{color: "green", textDecoration: "underline"}}>我是一段文字描述</p>      </div>    )  }}

內聯樣式的優點:

1.內聯樣式, 樣式之間不會有衝突2.可以動態獲取當前state中的狀態

內聯樣式的缺點：

1.寫法上都需要使用駝峰標識2.某些樣式沒有提示3.大量的樣式, 程式碼混亂4.某些樣式無法編寫(比如偽類/偽元素)

所以官方依然是希望內聯合適和普通的css來結合編寫；

1.2.2. 普通的css

普通的css我們通常會編寫到一個單獨的檔案。

App.js中編寫React邏輯程式碼：

import React, { PureComponent } from 'react';import Home from './Home';import './App.css';export default class App extends PureComponent {  render() {    return (      <div className="app">        <h2 className="title">我是App的標題</h2>        <p className="desc">我是App中的一段文字描述</p>        <Home/>      </div>    )  }}

App.css中編寫React樣式程式碼：

.title {  color: red;  font-size: 20px;}.desc {  color: green;  text-decoration: underline;}

這樣的編寫方式和普通的網頁開發中編寫方式是一致的：

如果我們按照普通的網頁標準去編寫，那麼也不會有太大的問題；但是元件化開發中我們總是希望元件是一個獨立的模組，即便是樣式也只是在自己內部生效，不會相互影響；但是普通的css都屬於全域性的css，樣式之間會相互影響；

比如編寫Home.js的邏輯程式碼：

import React, { PureComponent } from 'react';import './Home.css';export default class Home extends PureComponent {  render() {    return (      <div className="home">        <h2 className="title">我是Home標題</h2>        <span className="desc">我是Home中的span段落</span>      </div>    )  }}

又編寫了Home.css的樣式程式碼：

.title {  color: orange;}.desc {  color: purple;}

最終樣式之間會相互層疊，只有一個樣式會生效；

1.2.3. css modules

css modules並不是React特有的解決方案，而是所有使用了類似於webpack配置的環境下都可以使用的。

但是，如果在其他專案中使用，那麼我們需要自己來進行配置，比如配置webpack.config.js中的modules: true等。

但是React的腳手架已經內建了css modules的配置：

.css/.less/.scss 等樣式檔案都修改成 .module.css/.module.less/.module.scss 等；之後就可以引用並且進行使用了；

使用的方式如下：

css modules用法

這種css使用方式最終生成的class名稱會全域性唯一：

生成的程式碼結構

css modules確實解決了區域性作用域的問題，也是很多人喜歡在React中使用的一種方案。

但是這種方案也有自己的缺陷：

引用的類名，不能使用連線符(.home-title)，在JavaScript中是不識別的；所有的className都必須使用{style.className} 的形式來編寫；不方便動態來修改某些樣式，依然需要使用內聯樣式的方式；

如果你覺得上面的缺陷還算OK，那麼你在開發中完全可以選擇使用css modules來編寫，並且也是在React中很受歡迎的一種方式。

二. CSS in JS2.1. 認識CSS in JS

實際上，官方文件也有提到過CSS in JS這種方案：

“CSS-in-JS” 是指一種模式，其中 CSS 由 JavaScript 生成而不是在外部檔案中定義；注意此功能並不是 React 的一部分，而是由第三方庫提供。 React 對樣式如何定義並沒有明確態度；

在傳統的前端開發中，我們通常會將結構（HTML）、樣式（CSS）、邏輯（JavaScript）進行分離。

但是在前面的學習中，我們就提到過，React的思想中認為邏輯本身和UI是無法分離的，所以才會有了JSX的語法。樣式呢？樣式也是屬於UI的一部分；事實上CSS-in-JS的模式就是一種將樣式（CSS）也寫入到JavaScript中的方式，並且可以方便的使用JavaScript的狀態；所以React有被人稱之為 All in JS；

當然，這種開發的方式也受到了很多的批評：

Stop using CSS in JavaScript for web developmenthttps://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

批評聲音雖然有，但是在我們看來很多優秀的CSS-in-JS的庫依然非常強大、方便：

CSS-in-JS通過JavaScript來為CSS賦予一些能力，包括類似於CSS前處理器一樣的樣式巢狀、函式定義、邏輯複用、動態修改狀態等等；依然CSS前處理器也具備某些能力，但是獲取動態狀態依然是一個不好處理的點；所以，目前可以說CSS-in-JS是React編寫CSS最為受歡迎的一種解決方案；

目前比較流行的CSS-in-JS的庫有哪些呢？

styled-componentsemotionglamorous

目前可以說styled-components依然是社群最流行的CSS-in-JS庫，所以我們以styled-components的講解為主；

安裝styled-components：

yarn add styled-components

2.2. styled-components2.2.1. 標籤模板字串

ES6中增加了模板字串的語法，這個對於很多人來說都會使用。

但是模板字串還有另外一種用法：標籤模板字串（Tagged Template Literals）。

我們一起來看一個普通的JavaScript的函式：

function foo(...args) {  console.log(args);}foo("Hello World");

正常情況下，我們都是通過 函式名() 方式來進行呼叫的，其實函式還有另外一種呼叫方式：

foo`Hello World`; // [["Hello World"]]

如果我們在呼叫的時候插入其他的變數：

模板字串被拆分了；第一個元素是陣列，是被模組字串拆分的字串組合；後面的元素是一個個模組字串傳入的內容；

foo`Hello ${name}`; // [["Hello ", ""], "kobe"];

在styled component中，就是通過這種方式來解析模組字串，最終生成我們想要的樣式的

2.2.2. styled基本使用

styled-components的本質是通過函式的呼叫，最終創建出一個元件：

這個元件會被自動新增上一個不重複的class；styled-components會給該class新增相關的樣式；

比如我們正常開發出來的Home元件是這樣的格式：

<div>  <h2>我是Home標題</h2>  <ul>    <li>我是列表1</li>    <li>我是列表2</li>    <li>我是列表3</li>  </ul></div>

我們希望給外層的div新增一個特殊的class，並且新增相關的樣式：

styled-components基本使用

另外，它支援類似於CSS前處理器一樣的樣式巢狀：

最終效果如下

2.2.3. props、attrs屬性

props可以穿透

定義一個styled元件：

const HYInput = styled.input`  border-color: red;  &:focus {    outline-color: orange;  }`

使用styled的元件：

<HYInput type="password"/>

props可以被傳遞給styled元件

<HomeWrapper color="blue"></HomeWrapper>

使用時可以獲取到傳入的color：

獲取props需要通過${}傳入一個插值函式，props會作為該函式的引數；這種方式可以有效的解決動態樣式的問題；

const HomeWrapper = styled.div`  color: ${props => props.color};}

新增attrs屬性

const HYInput = styled.input.attrs({  placeholder: "請填寫密碼",  paddingLeft: props => props.left || "5px"})`  border-color: red;  padding-left: ${props => props.paddingLeft};  &:focus {    outline-color: orange;  }`

2.2.4. styled高階特性

支援樣式的繼承

編寫styled元件

const HYButton = styled.button`  padding: 8px 30px;  border-radius: 5px;`const HYWarnButton = styled(HYButton)`  background-color: red;  color: #fff;`const HYPrimaryButton = styled(HYButton)`  background-color: green;  color: #fff;`

按鈕的使用

<HYButton>我是普通按鈕</HYButton><HYWarnButton>我是警告按鈕</HYWarnButton><HYPrimaryButton>我是主要按鈕</HYPrimaryButton>

styled設定主題

在全域性定製自己的主題，通過Provider進行共享：

import { ThemeProvider } from 'styled-components';<ThemeProvider theme={{color: "red", fontSize: "30px"}}>  <Home />  <Profile /></ThemeProvider>

在styled元件中可以獲取到主題的內容：

const ProfileWrapper = styled.div`  color: ${props => props.theme.color};  font-size: ${props => props.theme.fontSize};`

2.3. classnames

vue中新增class

在vue中給一個元素新增動態的class是一件非常簡單的事情：

你可以通過傳入一個物件：

<div  class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

你也可以傳入一個數組：

<div v-bind:class="[activeClass, errorClass]"></div>

甚至是物件和陣列混合使用：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

react中新增class

React在JSX給了我們開發者足夠多的靈活性，你可以像編寫JavaScript程式碼一樣，通過一些邏輯來決定是否新增某些class：

import React, { PureComponent } from 'react'export default class App extends PureComponent {  constructor(props) {    super(props);    this.state = {      isActive: true    }  }  render() {    const {isActive} = this.state;     return (      <div>        <h2 className={"title " + (isActive ? "active": "")}>我是標題</h2>        <h2 className={["title", (isActive ? "active": "")].join(" ")}>我是標題</h2>      </div>    )  }}

這個時候我們可以藉助於一個第三方的庫：classnames

很明顯，這是一個用於動態新增classnames的一個庫。

我們來使用一下最常見的使用案例：