React の

CSS モジュールは、一意のクラス名を自動的に生成することで CSS の範囲を指定する方法です。これにより、大規模なアプリケーションでのクラス名の衝突が防止され、モジュール形式のスタイルが可能になります。 React プロジェクトで CSS モジュールを使用する方法は次のとおりです:

1. セットアップ

デフォルトでは、React は CSS モジュールをサポートしています。 CSS ファイルの名前に拡張子 .module.css.

2. セットアップ例

ファイル構造:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

ボタン.モジュール.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

ボタン.js:

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

仕組み:

• Button.module.css: 通常の CSS ファイルと同様に CSS ルールを定義します。
• styles.button: CSS モジュールのクラス名が JavaScript オブジェクトとしてインポートされます。これらは、styles.className.
を使用して参照します。

利点：

• スコープ付きスタイル: 各クラスはローカルでコンポーネントにスコープされ、名前の衝突を回避します。
• 保守性: アプリケーションが成長しても、CSS はモジュール化されたままになり、管理が容易になります。

特定のケースでサポートが必要な場合はお知らせください。