組件化必殺技：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 提供了很好的支持，哪些地方是徹底相同的？哪些地方須要你注意？本節視頻爲你解惑。視頻連接：pan.baidu.com/s/1bo7opeZ

7. 用 keyframes 實現界面動畫

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

6. 用 ThemeProvider 實現主題功能

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

5. 用 injectGlobal 設置全局樣式

組件化以後怎麼設置 body 樣式？由於 body 是不管如何不能被寫成一個組件的，好在 styled-components 給咱們提供了 injectGlobal 輔助函數來設置頁面的全局樣式。視頻連接：pan.baidu.com/s/1hrLXqvy

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

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

3. 用 attrs 封裝組件屬性，提升代碼複用

年年歲歲花類似，歲歲年年人不一樣，編寫代碼一樣會有這樣的問題，使用 attrs 機制不只讓咱們在組件中封裝樣式，也能封裝屬性，極大的提升代碼複用。視頻連接：pan.baidu.com/s/1pK97HMz

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

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

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

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

源碼連接

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

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

git clone https://github.com/wangshijun/course-styled-components-fundamentals.git
cd course-styled-components-fundamentals
yarn
yarn 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 便可獲取高清視頻教程下載地址。

最後，可能你有同窗會問，我爲何要作這個公開課？接下來的計劃是什麼？請閱讀很久不見，我總感受欠你點什麼