溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react中樣式沖突的解決方法

發布時間:2020-12-09 11:32:26 來源:億速云 閱讀:1232 作者:小新 欄目:web開發

小編給大家分享一下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一下,這是會發現瀏覽器里顯示的效果是這樣的:

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做一個單頁應用只有一個頁面,如果設置了全局樣式則整個頁面都會加載出此樣式。

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女