React アプリケーションでコンポーネント スコープの CSS を保証するにはどうすればよいですか?

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

React コンポーネントへの CSS のインポートはスタイル設定に不可欠ですが、コンポーネント スコープのスタイルを確保するのは困難な場合があります。あなたの場合、CSS を特定のコンポーネント内の要素にのみ適用し、コンポーネントがアンマウントされると表示されなくなるようにしたいと考えています。

1 つのアプローチは、React でコンポーネント スコープのスタイルを実現するための一般的な手法である CSS モジュールを使用することです。 。 CSS モジュールでは、指定された 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;

/* ./styles/button.css */
.button {
  border-radius: 3px;
  background-color: green;
  color: white;
}

CSS モジュールを使用すると、生成された CSS は次のようになります。ランダムに生成されたハッシュ値を含めて、各コンポーネントの一意のクラス名を保証します。これにより、コンポーネント間のスタイルの競合が防止されます。

別のアプローチは、汎用セレクターを回避し、コンポーネントと要素にクラスベースの命名規則を採用することです。例:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

すべての要素に一意のクラス名を割り当てることで、CSS モジュールに依存せずにスタイルの衝突を防ぐことができます。

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