React でコンポーネントスコープの CSS を実現するにはどうすればよいですか?

React でのコンポーネント スコープの CSS インポート

React コンポーネントへの CSS スタイルシートのインポートは、コンポーネント固有のスタイルを目的とする場合に課題が発生する可能性があります。デフォルトでは、CSS インポートはグローバルになり、アプリケーション全体のすべての要素に影響します。ただし、コンポーネント スコープの CSS 分離を実現することは可能です。

React での CSS インポートについて

従来、質問で例示されているように、React に CSS をインポートするには、 import ステートメントは、スタイルを

に挿入します。 HTML ドキュメントのセクション。このアプローチにより、CSS がグローバルにアクセスできるようになり、競合や過剰な仕様が発生します。

コンポーネント スコープの CSS ソリューション

コンポーネント スコープの CSS に対する効果的なソリューションの 1 つは、CSS を使用することです。モジュール。この手法では、CSS をコンポーネントのディレクトリ内にカプセル化します。クラス名はローカルにスコープされ、コンポーネントごとに一意に生成されます。

CSS モジュールの実装

CSS モジュールを実装するには:

1. コンポーネントのディレクトリ内に CSS ファイルを作成します(例:component-name/style.css)
2. JavaScript ES6 構文を使用して CSS ファイルをインポートします (例: './component-name/style.css';) からスタイルをインポートします
3. コンポーネントの render メソッド内でインポートされたスタイル オブジェクトを使用して、要素にスタイルを適用します (例: className={styles.className})

代替アプローチ

CSS モジュールが好まれない場合は、コンポーネントと要素のスタイルの一貫した命名規則に従うことを検討してください。 、p や code などの汎用セレクターを避けます。 BEM のようなアプローチ (例: .component-name__element-name) を採用することで、一意性を確保し、スタイルの競合を防ぐことができます。

以上がReact でコンポーネントスコープの CSS を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。