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

10年積累的網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有烏魯木齊免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

解決react中樣式?jīng)_突的方法：首先打開相應(yīng)的代碼文件；然后將類名前加上模塊名，如將整個(gè)組件的樣式表CSS類名前加上組件名LoveVideo即可。

解決react中樣式?jīng)_突

react在開發(fā)中很多有很多需要注意的地方，換句話說就是有很多小坑需要踩一踩，這里分享一下我遇到的一個(gè)小坑，就是樣式?jīng)_突，這是一個(gè)值得注意的問題，首先看一下例子：

有兩個(gè)組件，一個(gè)叫做TestAComponent，另外一個(gè)叫做TestBComponent，在TestA組件中我寫了一個(gè)背景色為藍(lán)色的按鈕，TestB中我寫了一個(gè)背景色為紅色的按鈕。

TestAComponent 組件A：

class TestAComponent extends React.Component {
  render() {
    return (
      

        背景為藍(lán)色
      
    );
  }
}

TestA css，背景設(shè)置的為藍(lán)色：

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

TestB 組件B：

class TestBComponent extends React.Component {
  render() {
    return (
      

        背景為紅色
      
    );
  }
}

TestB css，背景設(shè)置的為紅色：

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

代碼寫好之后npm start一下，這是會(huì)發(fā)現(xiàn)瀏覽器里顯示的效果是這樣的：

明明兩個(gè)按鈕設(shè)置了不同的背景色，為什么實(shí)際顯示會(huì)這樣呢？這是我們分析一下樣式的設(shè)置，在標(biāo)簽中我們?cè)O(shè)置的class名為box，這是很多前端新人常用的命名方法，但是將不同組件的標(biāo)簽的class類名設(shè)置為相同的名字會(huì)造成樣式?jīng)_突。

解決此問題方法：

將類名前加上模塊名，如這個(gè)組件叫做LoveVideo，則整個(gè)組件的樣式表CSS類名前加上組件名LoveVideo：

    TestA 背景為藍(lán)色  

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

修改好之后刷新一下頁(yè)面，你就會(huì)發(fā)現(xiàn)樣式?jīng)_突的問題就會(huì)很好的解決：

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

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

這樣的全局通用的樣式也切記不可設(shè)置的，因?yàn)槭褂胷eact做一個(gè)單頁(yè)應(yīng)用只有一個(gè)頁(yè)面，如果設(shè)置了全局樣式則整個(gè)頁(yè)面都會(huì)加載出此樣式。

以上是“react中樣式?jīng)_突的解決方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：react中樣式?jīng)_突的解決方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/essps.html