スタイルの競合を避けるために React でコンポーネントスコープの CSS を実現するにはどうすればよいですか?

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

問題

ES6 を使用する React アプリケーションでは、個別の CSS ファイルをコンポーネントにインポートできます。ただし、この方法でインポートすると、CSS がグローバルにレンダリングされることが多く、すべてのコンポーネントに影響します。これにより、CSS の競合や意図しないスタイル設定が発生する可能性があります。

コンポーネント スコープの CSS

望ましい動作は、CSS のスコープが個々のコンポーネントに設定され、そのコンポーネントのスコープ内でのみスタイルが適用されるようにすることです。これは、スタイルがコンポーネントに対して「ローカル」である必要があり、コンポーネントがアンマウントされると消えることを意味します。

解決策

コンポーネント スコープの CSS を実現するには、CSS モジュールまたは同様の CSS-in の利用を検討してください。 -JS パッケージ。例には、感情、スタイル付きコンポーネント、または npm の広範なカタログからのパッケージが含まれます。

CSS モジュールなどは、クラス名とアニメーション名をローカルにスコープするメカニズムを提供します。 URL とインポートはモジュール リクエスト形式で処理されます。

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 モジュールを使用すると、生成される CSS は次のようになります。

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

ハッシュ _3GjDE を持つ一意のクラス名は、スタイルのスコープをボタンに設定することで競合を防ぎますComponent.

代替アプローチ

代替の解決策は、汎用セレクターを回避し、コンポーネントと要素にクラスベースの命名規則を使用することです。例:

.aboutContainer {
  # Some style
}

.aboutContainer__code {
  # Some style
}

スタイルを必要とする各要素は一意のクラス名を受け取り、スタイルが特定のコンポーネント内にのみ適用されるようにします。

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