React でのスタイルの競合を解決する方法-jsチュートリアル-php.cn

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

藏色散人

リリース： 2023-01-04 09:36:40

オリジナル

3644 人が閲覧しました

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

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

#このチュートリアルの動作環境: 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 を実行すると、ブラウザに表示される効果が次のようになっていることがわかります:

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

明らかに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;
}

ログイン後にコピー

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

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