react中樣式衝突怎麼解決-js教程-PHP中文網

react中樣式衝突怎麼解決

藏色散人

發布： 2023-01-04 09:36:40

原創

3645 人瀏覽過

解決react中樣式衝突的方法：先開啟對應的程式碼檔案；然後將類別名稱前加上模組名，如將整個元件的樣式表CSS類別名稱前加上元件名稱LoveVideo即可。

react中樣式衝突怎麼解決

本教學操作環境：windows7系統、react17.0.1版本、thinkpad t480電腦。

推薦：《javascript基礎教學》

解決react中樣式衝突

react在開發中很多有很多需要注意的地方，換句話說就是有很多小坑需要踩一踩，這裡分享一下我遇到的一個小坑，就是樣式衝突，這是一個值得注意的問題，首先看一下例子：

有兩個元件，一個叫做TestAComponent，另一個叫做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中樣式衝突怎麼解決

##明明兩個按鈕設定了不同的背景色，為什麼實際顯示會這樣呢？這是我們分析樣式的設置，在標籤中我們設定的class名為box，這是許多前端新人常用的命名方法，但是將不同組件的標籤的class類別名稱設定為相同的名字會造成樣式衝突。

解決此問題方法：

將類別名稱前加上模組名，如這個元件叫做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中樣式衝突怎麼解決

#除了這樣命名相同造成的衝突外，還有一種情況就是設定了一些全域的樣式，例如：

html{
  background-color: #fff;
  font-size: 14px;
}
*{
  margin: 0;
  padding: 0;
  background-color: #fff;
  font-size: 14px;
}

登入後複製

這樣的全域通用的樣式也切記不可設定的，因為使用react做一個單頁應用只有一個頁面，如果設定了全域樣式則整個頁面都會載入出此樣式。

總結

1、單一元件類別名稱加上元件名稱前綴，如元件名稱為LoveVideo，則所有的樣式名稱前加上此前綴

2、不要設定html｛｝、*｛｝之類的全域通用樣式

以上是react中樣式衝突怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！