CSSモジュールズ

CSSを当てる際に様々な方法があるのですが、まずCSSモジュールズという方法を説明します。

例えばBreadcrumbコンポーネントにCSSを当てたいとします。その場合、components配下に、Breadcrumb.module.cssというファイルを作成します。基本的にコンポーネントと同じ名前のCSSファイルとしましょう。

CSSファイルには以下のように記述しましょう。class名の命名に関してですが、キャメルケースで記述するのが一般的です。

Breadcrumb.module.css◎

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

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

Breadcrumb.tsx◎

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

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

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

Breadcrumb.tsx◎

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

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