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

王仕軍發表於2017-11-07
元件化

課程目標

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 即可獲取高清視訊教程下載地址。

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

相關文章