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

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

成都創(chuàng)新互聯(lián)公司專業(yè)網(wǎng)站設(shè)計、網(wǎng)站制作，集網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文發(fā)布平臺等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計，讓網(wǎng)站在運行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

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

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

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

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

TestAComponent 組件A：

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

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

.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，背景設(shè)置的為紅色：

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

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

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

解決此問題方法：

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

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

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

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

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

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

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

文章名稱：react中樣式?jīng)_突的解決方法
URL地址：http://bm7419.com/article24/pceeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、網(wǎng)站策劃、微信小程序、全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)