react中樣式沖突的解決方法

小編給大家分享一下react中樣式沖突的解決方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

解決react中樣式沖突的方法：首先打開相應的代碼文件；然后將類名前加上模塊名，如將整個組件的樣式表CSS類名前加上組件名LoveVideo即可。

解決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一下，這是會發現瀏覽器里顯示的效果是這樣的：

明明兩個按鈕設置了不同的背景色，為什么實際顯示會這樣呢？這是我們分析一下樣式的設置，在標簽中我們設置的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;
}

修改好之后刷新一下頁面，你就會發現樣式沖突的問題就會很好的解決：

除了這樣命名相同造成的沖突外，還有一種情況就是設置了一些全局的樣式，比如：

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

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

以上是“react中樣式沖突的解決方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！