前言：

1、React最終編譯打包后都在一個(gè)html頁(yè)面中，如果在兩個(gè)組件中取一樣類名分別引用在自身，那么后者會(huì)覆蓋前者。
2、默認(rèn)情況下，只要導(dǎo)入了組件，不管組件有沒(méi)有顯示在頁(yè)面中，組件的樣式就會(huì)生效。

解決方案：

• 手動(dòng)處理 （起不同的類名，但是項(xiàng)目一大就會(huì)導(dǎo)致類名很亂，不利于團(tuán)隊(duì)協(xié)作）
• CSS IN JS ： 以js的方式來(lái)處理css（推薦）
• css不是一門編程語(yǔ)言，css沒(méi)有所有的局部作用域全局作用域這樣的區(qū)分。。。css只有全局作用域

CSS IN JS

一、概念

CSS IN JS：是使用 JavaScript 編寫(xiě) CSS 的統(tǒng)稱，用來(lái)解決 CSS 樣式?jīng)_突、覆蓋等問(wèn)題

CSS IN JS 的具體實(shí)現(xiàn)有 50 多種，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等

推薦使用：CSS Modules （React腳手架已集成，可直接使用）

二、CSS Modules

• CSS Modules 通過(guò)對(duì) CSS 類名重命名，保證每個(gè)類名的唯一性，從而避免樣式?jīng)_突的問(wèn)題
• 換句話說(shuō)：所有類名都具有“局部作用域”，只在當(dāng)前組件內(nèi)部生效
• 在 React 腳手架中：文件名、類名、hash（隨機(jī)）三部分，只需要指定類名即可 BEM
• xxxx.module.css

1、自動(dòng)生成的類名，我們只需要提供 classname 即可
[filename]_[classname]_[hash]
2、
類名：.error {} .red{}
實(shí)際生成的類名為：.NavHeader_error__ax7yz .NavHead_red_abcdc (相同命名的類名，經(jīng)過(guò)module處理以后，會(huì)生成不同的實(shí)際類名，特殊標(biāo)識(shí))

三、在項(xiàng)目中使用css Modules

創(chuàng)建名為 [name].module.css 的樣式文件（React腳手架中的約定，與普通 CSS 作區(qū)分）

組件中導(dǎo)入該樣式文件（注意語(yǔ)法）

通過(guò) styles 對(duì)象訪問(wèn)對(duì)象中的樣式名來(lái)設(shè)置樣式

css module的注意點(diǎn)：

• 類名最好使用駝峰命名，因?yàn)樽罱K類名會(huì)生成styles的一個(gè)屬性.tabBar {} => styles.tabBar
• 如果沒(méi)有使用駝峰命名，對(duì)于不合法的命名，需要使用[]語(yǔ)法.tab-bar {} => styles['tab-bar']
• 如果是全局的類名，應(yīng)該使用:global(.類名)的方式，不然會(huì)把全局類名給修改掉

:global(.icon-map) { }這樣css modules就不會(huì)修改掉類名了

四、css module配合sass

• css moudule也可以配合sass來(lái)使用，創(chuàng)建名為[name].module.scss
• 使用css modules解決Login組件樣式?jīng)_突問(wèn)題
• 如果sass文件中使用到了鏈接，需要使用絕對(duì)路徑~

五、module.scss 使用步驟：

六、總結(jié)

React樣式?jīng)_突總結(jié)：

sass和CSS Moudles 的搭配使用，解決了React中樣式?jīng)_突的問(wèn)題。

我們?nèi)匀豢梢栽诓煌M件中使用相同類名，但我們需要知道，名字相同的類名在Moudle的作用下，實(shí)際類名并不相同，以此確保了，樣式只在當(dāng)前組件內(nèi)生效。

React采取的是組件化編程，組件和組件對(duì)應(yīng)的樣式會(huì)放在同一個(gè)組件文件夾下。

但我們?nèi)匀恍枰溃涸谧詈缶幾g打包之后，所有組件的解構(gòu)和樣式，都會(huì)打包在同一個(gè)html頁(yè)面中。

到此這篇關(guān)于React樣式?jīng)_突解決問(wèn)題的方法 的文章就介紹到這了,更多相關(guān)React樣式?jīng)_突內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論