React プロジェクトへの CSS モジュールの実装

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 (
    <button className={styles.button}>
      Click Me
    </button>
  );
}

export default Button;

仕組み:

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

利点：

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

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

以上がReact プロジェクトへの CSS モジュールの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。