要在 React 中撰寫 CSS，為元素添加樣式，除了 Styled-components，另外還有一種方式就是 CSS Modules。之前我們提過，在寫 CSS 的時候，常常可能會因為重複命名，需要去處理衝突，而 CSS Modules 就是被用來解決這個全局作用域問題的一套工具。

CSS Modules

在 Codesandbox 上的 React Template，預設使用了 Create React App 來快速建立 React 專案，裡面會包含 webpack，並且設定好 CSS Modules 的環境。這是今天的範例程式碼，我們就直接拿 Create React App 來介紹 CSS Modules 的概念。

局部作用域

在 Create React App 裡，CSS 會以 檔名.module.css 的檔名存在，一樣可以在檔案內建立 CSS 樣式表。當我們要指定一個樣式到特定元素上時，就以變數形式 import 樣式表，在 className 內引用該變數。

舉例來說，現在有 App component 和 Test component，並且兩個組件各自存在 text 的樣式：

app.module.css

.text {
  color: red;
}

test.module.css

.text {
  color: blue;
}

現在用 CSS Modules 的方式將樣式指定給元素：

App.js

import style from "./app.module.css";
import Test from "./Test";

export default function App() {
  return (
    <div>
      <h1 className={style.text}>App</h1>
      <Test></Test>
    </div>
  );
}

Test.js

import style from "./test.module.css";

export default function Test() {
  return (
    <div>
      <h1 className={style.text}>Test</h1>
    </div>
  );
}

打開開發人員工具觀察一下兩個元素的標籤，可以看到這兩個樣式類別分別被轉成獨特的 ClassName，讓彼此不會互相影響，CSS Modules 就是透過這樣的方式去解決 CSS 重複命名和全域污染的問題。

全局作用域

那相反的，當有些樣式想要共用時，要產生全局類別的話怎麼做？就在 CSS 樣式類別的名稱之前加上 :global，該樣式就會變成全局性，不會被轉換成獨特的 ClassName。

app.module.css

:global(.text_green) {
  color: green;
}

App.js

import style from "./app.module.css";

export default function App() {
  return (
    <div>
      <h1 className="text_green">App</h1>
    </div>
  );
}

組合 Class

另外 CSS Modules 還提供了可以繼承樣式類別的功能 — 組合 (Composition)，可以將共同樣式拆分出來成獨立的類別，利用 composes 繼承，基於該類別再多添加其他特別的樣式。

app.module.css

.background_gray {
  background-color: gray;
}

.text_yellow {
  composes: background_gray;
  color: yellow;
}

App.js

import style from "./app.module.css";

export default function App() {
  return (
    <div>
      <h1 className={style.text_yellow}>App</h1>
    </div>
  );
}

小結

範例程式碼

今天主要講解了幾個 CSS Module 主要的功能，如果你還想了解更多的話，可以到官方文件觀看詳細內容。目前我們已經具備了能夠在 React 建立組件、樣式的能力，在接下來最後的幾篇文章，就會帶大家用 React 來實作一個待辦清單，那我們就下章再見囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• CSS Modules Github
• create-react-app：css modules
• CSS Modules 用法教程
• CSS Modules: 模組化 CSS