React でのスタイルの競合を解決する方法

react でスタイルの競合を解決する方法: まず、対応するコード ファイルを開き、次にクラス名の前にモジュール名を追加します。たとえば、コンポーネント名 LoveVideo をコンポーネント全体のスタイル シートの CSS クラス名の前に追加します。 。

#このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、thinkpad t480 コンピューター。

推奨: 「

Javascript 基本チュートリアル 」

react でのスタイルの競合の解決

react 開発には多くのニーズがあります注意する必要がある, 言い換えれば, 踏まなければならない落とし穴がたくさんあります. ここで私が遭遇した落とし穴を共有します, それはスタイルの競合です. これは注目すべき問題です. まず, 例を見てください:

2 つのコンポーネントがあり、1 つは TestAComponent と呼ばれ、もう 1 つは TestBComponent と呼ばれます。TestA コンポーネントでは青色の背景色でボタンを作成し、TestB では赤色の背景色でボタンを作成しました。

TestAComponent コンポーネント A:

class TestAComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为蓝色</button>
      </div>
    );
  }
}

TestA css、背景は青に設定されます:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

TestB コンポーネント B:

class TestBComponent extends React.Component {
  render() {
    return (
      <div>
        <button className="box">背景为红色</button>
      </div>
    );
  }
}

TestB css、背景が設定されているのは赤です:

.box{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: red;
  border-radius: 10px;
}

コードを記述した後、npm start を実行すると、ブラウザに表示される効果が次のようになっていることがわかります:

明らかに2 ボタンの背景色が異なっているのに、実際の表示はなぜこのようになるのでしょうか？ここでスタイル設定を分析します。ラベルに設定したクラス名はボックスです。これは、多くの新しいフロントエンド開発者が使用する一般的な命名方法です。ただし、異なるコンポーネントのラベルのクラス名を同じ名前に設定します。スタイルの競合が発生します。

この問題を解決する方法:

クラス名の前にモジュール名を追加します。たとえば、このコンポーネントが LoveVideo という場合は、コンポーネント全体の CSS クラス名の前にコンポーネント名 LoveVideo を追加します。コンポーネントのスタイルシート:

<div>
    <button className="LoveVideobox">TestA 背景为蓝色</button>  
</div>
.LoveVideobox{
  font-size: 20px;
  margin: 10px;
  padding: 20px;
  background-color: blue;
  border-radius: 10px;
}

変更後にページを更新すると、スタイルの競合の問題がうまく解決されることがわかります:

さらに同じ名前付けによって引き起こされる競合には、次のようなグローバル スタイルが設定されている状況もあります。アプリケーションには 1 ページしかありません。グローバル スタイルが設定されている場合、ページ全体がこのスタイルで読み込まれます。

概要

1. コンポーネント名のプレフィックスを単一のコンポーネント クラス名に追加します。コンポーネントの名前が LoveVideo の場合は、このプレフィックスをすべてのスタイル名に追加します。

2. Do設定しないでください。html{}、*{}

などのグローバル共通スタイル

以上がReact でのスタイルの競合を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。