何謂 CSS in JS

在之前的範例中，已經把 React 分成一個一個模組（我們的身分證製造機還沒有分好XD），這樣可達到元件、功能變成模組化。既然 HTML 和 Javascript 可以達到，那 CSS 也可以囉！於是乎， CSS-in-JS 的概念就出來，與其他元件相同，元件彼此獨立相不受干擾，達到共用樣式、功能，卻又各自獨立發展的要求，

使用 emotion

emotion 為市場上常使用的套件，詳細介紹可以參考這邊鐵人賽文章－[〈[Day 14 - 即時天氣] 把 CSS 寫在 JavaScript 中！？ - CSS in JS 的使用〉](https://ithelp.
ithome.com.tw/articles/10223071)，這邊說明怎麼使用。

• 安裝 emotion

簡單來說，直接使用語法安裝吧！

npm i @emotion/react

當安裝完畢後，可能會看到紅字（6 high severity vulnerabilities），並且說明，需要處理這些問題，因此可以使用這個語法來強制修正：

npm audit fix --force

修正完畢就沒有啥問題囉！

• 使用 emotion

參考官網教學，我們直接使用範例，但是結合在 React 的 app 範本中：

import { css } from "@emotion/react";

function CssSample() {
  const color = "white";

  return (
    <div
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
          color: ${color};
        }
      `}
    >
      Hover to change color.
    </div>
  );
}

export default CssSample;

後記

有遇到無法執行的問題：Error: error:0308010C:digital envelope routines::unsupported，這會使我們無法執行 React，但跟著這篇文章，修改檔案就可以執行囉！