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

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

はじめに
多くの React アプリケーションは、特に複数の CSS スタイルを扱う場合に課題に直面しています。コンポーネント。適切な分離を確保し、グローバル スタイルを回避するには、コンポーネント スコープの CSS インポートを実装することをお勧めします。

CSS モジュール
コンポーネント スコープの CSS インポートを実現する一般的なアプローチは、CSS を使用することです。モジュール。 CSS モジュールを使用すると、クラス名とアニメーション名のスコープは、CSS ファイルがインポートされるコンポーネント内に自動的に設定されます。 URL とインポートもモジュール リクエスト構文に従い、スタイルがコンポーネント内で確実に分離されるようにします。

サンプル コード
React コンポーネントとそれに付随する CSS を考えてみましょう。ファイル:

コンポーネント

import React from 'react';
import styles from './styles/button.css';

class Button extends React.Component {
  render() {
    return (
      <button className={styles.button}>
        Click Me
      </button>
    );
  }
}
export default Button;

CSS

.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

Post-CSS Transformation
CSS モジュールが変換を実行すると、CSS 出力は次のようになります。次のようになります。

.button_3GjDE {
  border-radius: 3px;
  background-color: green;
  color: white;
}

「_3GjDE」サフィックスは、ランダムに生成されたハッシュを表し、クラス名がコンポーネント内で一意であることを保証します。

代替アプローチ: クラスベースの命名規則
外部プラグインを避けたい場合は、コンポーネントと要素にクラスベースの命名規則を採用できます。各要素に一意のクラス名を使用することで、コンポーネントの分離を維持できます。

コード例

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

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