小編給大家分享一下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中樣式沖突的解決方法”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。