組件化必殺技：styled-components 簡明教程【附視頻下載】

課程目標

23 分鐘帶你學會現代化的組件樣式書寫方法：styled-components。

課程簡介

通過將 ES6 中的模板字元串（template literals）特性創造性的運用到 CSS 編碼上，styled-components 成了前端社區現象級的 CSS-IN-JS 解決方案，能讓我們在不用擔心樣式和組件之間如何關聯的情況下用 CSS 書寫組件，讓樣式組件真正成為開發的基本單元。

那麼，如何在 React/React Native 項目中使用 styled-components？如何改造現有項目？如何提高代碼復用度和適應變化的能力？共 8 小節，23 分鐘，本視頻教程將為你打開 styled-components 的大門，讓你熟知 styled-components 的主要特性，視頻演示用的源碼將會放在 Github 上供你調試。

適用人群

1. [必須]具備前端基礎知識，了解 ES6；
2. [必須]具備 React 基礎知識，有開發經驗更好；
3. [可選]期望跟上社區發展動態，學習最新的開發技術，如果滿足這點，前兩點可忽略；
4. [可選]具備 React Native 基礎知識，有開發經驗的更好；

內容目錄

8. 在 React Native 中使用 styled-components

styled-components 也為 React Native 提供了很好的支持，哪些地方是完全相同的？哪些地方需要你注意？本節視頻為你解惑。視頻鏈接：https://pan.baidu.com/s/1bo7opeZ

7. 用 keyframes 實現界面動畫

恰到好處的動畫能讓用戶對你的應用愛不釋手，styled-components 提供的 keyframes 輔助函數能夠讓我們很容易的把 CSS 裡面的動畫遷移到組件中。視頻鏈接：https://pan.baidu.com/s/1hspJ0rE

6. 用 ThemeProvider 實現主題功能

把應用中常用的字體、顏色、尺寸集中起來管理能極大提高代碼適應變化的能力，這種功能或設計可以常被稱為"主題"（亦可稱皮膚）的"作用"，實例演示 styled-components 的主題機制。視頻鏈接：https://pan.baidu.com/s/1kVwyV0F

5. 用 injectGlobal 設置全局樣式

組件化之後怎麼設置 body 樣式？因為 body 是無論如何不能被寫成一個組件的，好在 styled-components 給我們提供了 injectGlobal 輔助函數來設置頁面的全局樣式。視頻鏈接：https://pan.baidu.com/s/1hrLXqvy

4. 用 extend 創建組件變種，實現樣式繼承

用 JS 書寫樣式就失去了繼承的能力？使用 styled-components 提供的 extend 機制，讓我們找回這種能力，單重繼承？多重繼承？隨你所需。視頻鏈接：https://pan.baidu.com/s/1i4WKzqt

3. 用 attrs 封裝組件屬性，提高代碼復用

年年歲歲花相似，歲歲年年人不同，編寫代碼同樣會有這樣的問題，使用 attrs 機制不僅讓我們在組件中封裝樣式，也能封裝屬性，極大的提高代碼復用。視頻鏈接：https://pan.baidu.com/s/1pK97HMz

2. 用 props 調整組件樣式，真正發揮 JS 的威力

使用 styled-components 編寫組件的時候，可以在模板字元串中傳入函數，或者表達式，這樣就可以根據傳給組件的 props 來調整組件的樣式，讓你真正體會到 CSS-IN-JS 的樂趣和威力。視頻鏈接：https://pan.baidu.com/s/1o81c23S

1. 用 styled-components 編寫簡單的 React 組件

實例演示使用 styled-components 編寫 React 組件基本步驟和語法，把要基於 classNames 才能實現的樣式關聯去掉，用純 CSS 的方式去書寫 React 組件。視頻鏈接：https://pan.baidu.com/s/1mhGzy56

源碼鏈接

代碼倉庫：wangshijun/course-styled-components-fundamentals

運行方法（建議安裝和使用 yarn）

git clone https://github.com/wangshijun/course-styled-components-fundamentals.gitcd course-styled-components-fundamentalsyarnyarn start# react-native 代碼的運行直接參照 react-native 官網文檔即可

要運行每節課的代碼，只需要將倉庫 checkout 下面對應的版本。

1. 用 styled-components 編寫簡單的 React 組件
2. 用 props 調整組件樣式，真正發揮 JS 的威力
3. 用 attrs 封裝組件屬性，提高代碼復用
4. 用 extend 創建組件變種，實現樣式繼承
5. 用 injectGlobal 設置全局樣式
6. 用 ThemeProvider 實現主題功能
7. 用 keyframes 實現界面動畫
8. 在 React Native 中使用 styled-components

運行環境

• Node.js v8.6.0
• React v16
• React Native v0.49.0
• VSCode v1.17.1 + Vim
• Chrome v61

參考資料

styled-components docs

視頻下載

關注《前端周刊》微信公眾號：fullstackacademy，回復 course-styled-components 即可獲取高清視頻教程下載地址。

最後，可能你有同學會問，我為什麼要做這個公開課？接下來的計劃是什麼？請閱讀好久不見，我總感覺欠你點什麼