react樣式污染問(wèn)題

在vue文件中我們使用scoped來(lái)進(jìn)行css模塊化開(kāi)發(fā)，使其樣式互不受影響。

但是在react中沒(méi)有scoped屬性， 而react中我們發(fā)現(xiàn)css樣式設(shè)置也存在互相影響的問(wèn)題。

(例如：改變?nèi)謽邮?，設(shè)置的樣式不起效果，被其他地方的樣式覆蓋...)

但在react中可以利用module方法來(lái)解決：

（1）改樣式文件名。從 xx.css -> xx.module.css （React腳手架中的約定，與普通 CSS 作區(qū)分）

（2）將寫(xiě)好的css樣式引入到對(duì)應(yīng)組件中。

import styles from "xxx.module.css";

 一般命名為styles

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

注： 避免一個(gè)文件有相同的class名稱，只生效一個(gè)（最后一個(gè)覆蓋之前所有的）

解析完的類(lèi)名是一個(gè)哈希串。

// css類(lèi)名是index.module.scss中定義的類(lèi)名
<div className={styles.css類(lèi)名}></div>

（4）注意： css類(lèi)名中如果有 '-' 則要改為styles[ css類(lèi)名 ]。因?yàn)樽罱K這個(gè)類(lèi)名會(huì)生成為styles對(duì)象上的一個(gè)屬性。一般推薦使用小駝峰命名法

react防樣式污染小助手-css module

react與vue不同，vue可以通過(guò)在script中設(shè)置scoped來(lái)限制樣式的生效范圍，不至于樣式污染,

CSS 的局部作用域解決了大問(wèn)題。在w3c 規(guī)范中，CSS 始終是「全局的」。在傳統(tǒng)的 web 開(kāi)發(fā)中，最為頭痛的莫過(guò)于處理 CSS 問(wèn)題。因?yàn)槿中?，明明定義了樣式，但就是不生效，原因可能是被其他樣式定義所強(qiáng)制覆蓋。接手老項(xiàng)目更是噩夢(mèng)，改對(duì)了一個(gè)地方的樣式，卻把另外許多地方的樣式打亂。

CSS modules 是從工具層面給出的一套生成局部 CSS 的規(guī)范，本質(zhì)還是生成全局唯一的 CSS 定義。webpack 實(shí)現(xiàn)了這套規(guī)范。

1.css modules是默認(rèn)開(kāi)啟的，所以我們只需要將原先的.less或.css文件名稱改為.module.less

例：index.css改為index.module.css

//index.module.css
.app {
  background: red;
}

2.在react的js文件引入：

import index from './index.module.css'

3.使用

    <div className={index.App}>
     123
    </div>

4.

可以看到class是一堆啥玩意的名字，實(shí)際上它 是 App--<hash數(shù)值>，這個(gè) hash 值是全局唯一的，比如通過(guò)文件路徑來(lái)獲得，這樣 class 名稱就做到了全局唯一。

通過(guò)全局唯一的 CSS 命名，我們變相地獲得了局部作用域的 CSS（scoped CSS）。

如果一個(gè) CSS 文件僅僅是作用在某個(gè)局部的話，我們稱這樣一個(gè) CSS 文件為 CSS module

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論