CSS Modulesで書く方法

CSS Modulesは、ローカルスコープのCSSを提供する方法。
CSSファイルを作成し、コンポーネントでインポートして使用する。

<styles.module.css>

.myComponent {
  color: red;
  font-size: 18px;
}

import React from "react";
import styles from "./styles.module.css";

const MyComponent: React.FC = () => {
  return <div className={styles.myComponent}>Hello, world!</div>;
};

メリット:
スタイルがローカルスコープであるため、名前の衝突を避けられる
CSSファイルが分離されているため、可読性が高い

デメリット:
CSSファイルが増えることで、プロジェクトの構成が複雑になることがある

他にもいろんな方法があるけど今回はこの方法で使用。
他の方法はURL参照