讀者進入以下網址：https://codesandbox.io/s/new，就能進到由 CodeSandbox 提供的線上開發環境以及使用 create-react-app 指令建立好的 React 專案來進行練習

要在 React 中添加樣式的方法有很多，網路上也能找到許多函式庫可以幫助開發者管理 css 樣式，但其實 React 本身就可以用 inline 的方式添加樣式，透過 create-react-app 建立的 React 專案也有引入 css module，因此接下來就以介紹這兩種添加樣式的方法。

inline css(行內樣式)

在 HTML 中本身就可以使用行內樣式，直接添加在元素標籤上，例如：

<div style="color: red; background: green; font-size: 16px; line-height: 18px;"></div>

在 React 中也有類似的方式，但必須將樣式字串轉換程物件的型態，例如：

<div style={{ color: 'red', background: 'green', fontSize: '16px', lineHeight: 18 }} />

其中樣式名稱和樣式值對應到物件的 key 和 value。

由於物件的 key 是沒有辦法使用 kebab case(短橫線隔開命名法)，所以我們必須使用 lower camel case(小寫駝峰式命名法)，而樣式值皆為字串的型態，但 px 單位的樣式值可以改用數字的型態。

許多人可能一開始會覺得左右兩個雙大括號很奇怪，其實內層的大括號就是物件的括號，外層的大括號則是因為在 JSX 中嵌入 JavaScript 表達式。

css module(模組化樣式)

React 的元件具有模組化的特性，每個元件之間是相互獨立的，每個元件也都各自封裝，外界不需要知道元件的內部運作，只要知道如何透過 props 來溝通，因此我們使用 css module 讓樣式也能和元件綁在一起，封裝在各個元件內，如此元件樣式之間就不會互相汙染影響。

使用 css module

新建一個檔案，命名為 Xxx.module.scss，其中 Xxx 習慣會和元件名稱相同，.module 則表示這一個樣式檔案為模組化樣式，.scss 副檔名表示我們可以使用 scss 語法，若想使用 css 語法也可以改為 .css 副檔名。

在檔案內用類別選擇器添加樣式，例如：

.container {
  margin: 8px;

  .title {
    font-size: 16px;
  }
  
  .description {
    font-size: 12px;
  }
}

在 Xxx.js 中引入 Xxx.module.scss 會是一個物件，習慣命名為 styles，檔案內的類別名稱作為物件的 key 來取得 hash 過的類別名稱，設給 className，例如：

import styles from './Xxx.module.scss';

function Xxx() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>css module(模組化樣式)</h1>
      <p className={styles.description}>使用 css module 讓樣式也能和元件綁在一起，封裝在各個元件內，如此元件樣式之間就不會互相汙染影響</p>
    </div>
  )
}