# CSSモジュールズ CSSを当てる際に様々な方法があるのですが、まず**CSSモジュールズ**という方法を説明します。例えばBreadcrumbコンポーネントにCSSを当てたいとします。その場合、components配下に、`Breadcrumb.module.css`というファイルを作成します。基本的にコンポーネントと同じ名前のCSSファイルとしましょう。 CSSファイルには以下のように記述しましょう。class名の命名に関してですが、キャメルケースで記述するのが一般的です。

.listTitle {
  font-size: 30px;
  font-weight: bold;
}

そして、そのcssファイルを`Breadcrumb.tsx`にimportしましょう。importする際に`import styles from "./Breadcrumb.module.css";`とすると、`styles`にオブジェクト形式で、各クラス名とそのCSSが格納されます。

import { useState } from "react";
import styles from "./Breadcrumb.module.css";

type Props = {
  items: string[];
};
...

`そして呼び出す際には、className={styles.`listTitle`}とすることで、 module.css`で定義したclass名のCSSを当てることができます。

...
    return (
        <>
            <p className={styles.listTitle}>パンくずリスト</p>
            {items.length === 0 ? (

ブラウザにて確認すると、以下のようにCSSが当てられていることが確認できるかと思います。