ReactにおけるCSS Modulesの使用方法

CSS Modulesのセットアップ: まず、ReactプロジェクトにCSS Modulesをセットアップする必要があります。以下の手順に従ってください。

1.1. プロジェクトにCSS Modulesをサポートするためのローダーをインストールします。一般的な選択肢としては、"css-loader"と"style-loader"を使用することができます。以下のコマンドでインストールします。

npm install --save-dev css-loader style-loader

1.2. Reactコンポーネントのファイル拡張子を".module.css"に変更します。これにより、ReactはそのファイルをCSS Modulesとして認識します。

CSS Modulesの使用方法: CSS Modulesを使用すると、各Reactコンポーネント内でスタイルを定義し、クラス名を生成することができます。以下に例を示します。

// Button.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}
// Button.jsx
import React from 'react';
import styles from './Button.module.css';
const Button = () => {
  return <button className={styles.button}>Click me</button>;
};
export default Button;

上記の例では、Buttonコンポーネント内でスタイルを定義し、stylesオブジェクトを介してクラス名を参照しています。これにより、クラス名がグローバルな名前空間ではなく、ユニークなスコープ内に存在することが保証されます。

CSS Modulesのクラス名の使用: CSS Modulesを使用すると、生成されたユニークなクラス名を直接コンポーネント内で使用することができます。以下に例を示します。

// Button.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}
.active {
  background-color: red;
}
// Button.jsx
import React from 'react';
import styles from './Button.module.css';
const Button = () => {
  const isActive = true;
  return (
    <button className={`${styles.button} ${isActive ? styles.active : ''}`}>
      Click me
    </button>
  );
};
export default Button;

上記の例では、isActiveというローカルな変数を使用して、スタイルを動的に切り替える方法を示しています。isActiveがtrueの場合、"active"クラスが適用されます。

以上が、ReactにおけるCSS Modulesの使用方法とコード例の紹介です。CSS Modulesを使用することで、Reactプロジェクトのスタイリングをより効果的に管理できます。是非、試してみてください。