CSS Modulesの使い方

CSS Modules を使うと、クラス名の衝突を防ぎながらコンポーネントごとにスタイルをスコープ化できます。

1. CSS Modules のファイル命名規則

ファイル名は .module.css にする必要があります。

📁 src/
 ┣ 📄 MyComponent.tsx
 ┗ 📄 MyComponent.module.css

2. CSS ファイルの記述例

/* MyComponent.module.css */
.box {
  padding: 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

3. コンポーネント側での読み込みと使用

import styles from './MyComponent.module.css';

const MyComponent = () => {
  return <div className={styles.box}>スタイルが適用されます</div>;
};

4. 条件付きで複数クラスを使いたい場合

<div className={`${styles.base} ${isActive ? styles.active : ''}`}>
  条件付きクラス適用
</div>

または、clsx ライブラリを使うと便利です：

npm install clsx

import clsx from 'clsx';

<div className={clsx(styles.base, isActive && styles.active)} />

5. 注意点

• グローバルな CSS と異なり、CSS Modules はファイル内だけで有効です
• className は動的にハッシュ化されるため、他のコンポーネントと干渉しません
• .module.scss など Sass も対応可能（ビルド環境に依存）