React樣式沖突解決問題的方法
前言:
1、React最終編譯打包後都在一個html頁面中,如果在兩個組件中取一樣類名分別引用在自身,那麼後者會覆蓋前者。
2、默認情況下,隻要導入瞭組件,不管組件有沒有顯示在頁面中,組件的樣式就會生效。
解決方案:
- 手動處理 (起不同的類名,但是項目一大就會導致類名很亂,不利於團隊協作)
CSS IN JS
: 以js的方式來處理css(推薦)- css不是一門編程語言,css沒有所有的局部作用域全局作用域這樣的區分。。。css隻有全局作用域
CSS IN JS
一、概念
CSS IN JS:是使用 JavaScript 編寫 CSS 的統稱,用來解決 CSS 樣式沖突、覆蓋等問題
CSS IN JS 的具體實現有 50 多種,比如:React常用(CSS Modules、styled-components)、 Vue常用(<style scoped>
、css modules
)等
推薦使用:CSS Modules (React腳手架已集成,可直接使用)
二、CSS Modules
- CSS Modules 通過對 CSS 類名重命名,保證每個類名的唯一性,從而避免樣式沖突的問題
- 換句話說:所有類名都具有“局部作用域”,隻在當前組件內部生效
- 在 React 腳手架中:文件名、類名、hash(隨機)三部分,隻需要指定類名即可 BEM
xxxx.module.css
1、自動生成的類名,我們隻需要提供 classname 即可
[filename]_[classname]_[hash]
2、
類名:.error {}
.red{}
實際生成的類名為:.NavHeader_error__ax7yz
.NavHead_red_abcdc
(相同命名的類名,經過module處理以後,會生成不同的實際類名,特殊標識)
三、在項目中使用css Modules
創建名為 [name].module.css
的樣式文件(React腳手架中的約定,與普通 CSS 作區分)
組件中導入該樣式文件(註意語法)
通過 styles 對象訪問對象中的樣式名來設置樣式
css module的註意點:
- 類名最好使用駝峰命名,因為最終類名會生成
styles
的一個屬性.tabBar {}
=>styles.tabBar
- 如果沒有使用駝峰命名,對於不合法的命名,需要使用[]語法
.tab-bar {}
=>styles['tab-bar']
- 如果是全局的類名,應該使用
:global(.類名)
的方式,不然會把全局類名給修改掉
:global(.icon-map) { }
這樣css modules就不會修改掉類名瞭
四、css module配合sass
- css moudule也可以配合sass來使用,創建名為
[name].module.scss
- 使用css modules解決Login組件樣式沖突問題
- 如果sass文件中使用到瞭鏈接,需要使用絕對路徑
~
五、module.scss 使用步驟:
六、總結
React樣式沖突總結:
sass和CSS Moudles 的搭配使用,解決瞭React中樣式沖突的問題。
我們仍然可以在不同組件中使用相同類名,但我們需要知道,名字相同的類名在Moudle的作用下,實際類名並不相同,以此確保瞭,樣式隻在當前組件內生效。
React采取的是組件化編程,組件和組件對應的樣式會放在同一個組件文件夾下。
但我們仍然需要知道:在最後編譯打包之後,所有組件的解構和樣式,都會打包在同一個html頁面中。
到此這篇關於React樣式沖突解決問題的方法 的文章就介紹到這瞭,更多相關React樣式沖突內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 在 React Native 中使用 CSS Modules的配置方法
- vue中配置scss全局變量的步驟
- 在vue項目中引入scss並使用scss樣式詳解
- Vue報錯Syntax Error:TypeError: this.getOptions is not a function的解決方法
- Next.js入門使用教程