2-5 在 JSX 中套用 CSS 樣式

在上一個單元中雖然已經可以看到帶有 CSS 樣式的畫面，但透過 CodePen 上的 console 視窗，或用瀏覽器內建的開發者工具打開 console 視窗都會看到一個錯誤訊息：

Warning: Invalid DOM property `class`. Did you mean `className`?

現在就讓我們來看怎麼解決這個錯誤訊息，還有如何在 JSX 中正確使用 CSS 樣式的方法

使用 CSS class 樣式#

之所以會有這個錯誤訊息，是因為在 JavaScript 中，class 本身就已經是個關鍵字，它主要是用來定義類別（class）用的，因此為了避免踩到 JavaScript 的這個關鍵字，需要把在 JSX 中會把原本 HTML 中使用的 class="" 都改用 className=""，因此程式碼會變成：

// 在 JSX 中使用 CSS class
// 避免關鍵字衝突，在 JSX 中把原本的 CSS class 都改成用 className
const Counter = (
  <div className="container">
    <div className="chevron chevron-up"></div>
    <div className="number">256</div>
    <div className="chevron chevron-down"></div>
  </div>
);

ReactDOM.render(Counter, document.getElementById('root'));

如此錯誤訊息就會消失了。

使用 inline-style（行內樣式）#

如果我們需要在 JSX 中撰寫 CSS inline-style 的話，可以在 HTML 標籤內的 style 屬性中以帶入「物件」的方式來完成。

在前面我們有提到，在 JSX 中可以使用 {} 來帶入變數，當我們想要撰寫 inline-style 時，就可以在 <div style={} > 的 {} 中放入「物件」；物件的屬性名稱會是 CSS 的屬性，但會用「小寫駝峰」來表示；屬性值則是 CSS 的值，具體的寫法會像這樣：

// 定義 inline-style 行內樣式
const someStyle = {
  backgroundColor: white,
  fontSize: '20px', // 也可以寫 20，引號和 px 可以省略
  border: '1px solid white',
  padding: 10, // 省略 px，樣式會自動帶入單位變成 '10px'
};

// 在 style 中帶入物件，即可撰寫出 inline-style
const SomeElement = <div style={someStyle} />;

這裡我們可以注意到：

屬性名稱都會以小寫駝峰命名，例如 backgroundColor 和 fontSize
要記得這是 JavaScript 物件，所以當你想要直接使用顏色時，要使用字串的方式表示，所以使用 "white" 時有用雙引號包起來
屬性值預設會以 px 為單位，所以 padding: 10 指的就是 "10px"；同樣的，fontSize: "20px" 可以縮寫成 fontSize: 20
要記得這是 JavaScript 物件，所以每個屬性的最後是使用 , 而不是 ; 來做換行

以計數器的範例來說，可以先定義一個名為 shadow 的物件，裡面放入 CSS，接著再把它帶入 JSX 的 style 屬性中，像是這樣：

// 定義 inline-style 行內樣式
const shadow = {
  boxShadow: 'rgb(20, 76, 128) 0px 0px 10px 10px',
  padding: 20, // 省略 px，樣式會自動帶入單位變成 '20px'
};

// 在 style 中帶入物件，即可撰寫出 inline-style
const Counter = (
  // 將行內樣式帶入 `style` 內
  <div className="container" style={shadow}>
    <div className="chevron chevron-up" />
    <div className="number">256</div>
    <div className="chevron chevron-down" />
  </div>
);

如此就可以套用行內樣式：

Imgur

許多時候，開發者可能不會先定義一個 inline-style 的物件，接著才放入 JSX 的 style 屬性內，而是直接把 inline-style 這個物件寫在 style={} 的 {} 內，所以你會看到 style={{...}} 這樣的寫法，一開始看到兩個大括號 {{ }} 會有些不太習慣，但實際上就只是在 style={} 的 {} 內再放入一個物件而已，像是這樣：

// 在 JSX 中使用行內樣式
// 在 style 屬性中直接帶入物件
<div
  className="number"
  style={{
    color: '#FFE8E8',
    textShadow: '2px 2px #434a54',
  }}
>
  256
</div>

換你了：調整成你自己喜歡的樣式吧#

在這個單元中主要說明了如何在 JSX 中正確套用 CSS class 和行內樣式的方法，若實作上有碰到問題的話，可以到下方的連結檢視完整的程式碼，或點擊 Github 説明頁上的「在 JSX 中套用 CSS Class」連結：

https://codepen.io/PJCHENder/pen/pogybWq

Imgur

這個單元中套用的 CSS 樣式主要是作為說明使用，後續的改寫將不會繼續套用這些樣式，但如果你對於畫面有自己的想法的話，現在是你自己動手改寫的時候了！