react樣式污染問題

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

但是在react中沒有scoped屬性， 而react中我們發(fā)現css樣式設置也存在互相影響的問題。

(例如：改變全局樣式，設置的樣式不起效果，被其他地方的樣式覆蓋...)

但在react中可以利用module方法來解決：

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

（2）將寫好的css樣式引入到對應組件中。

import styles from "xxx.module.css";

 一般命名為styles

（3） 通過 styles 對象訪問對象中的樣式名來設置樣式

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

解析完的類名是一個哈希串。

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

（4）注意： css類名中如果有 '-' 則要改為styles[ css類名 ]。因為最終這個類名會生成為styles對象上的一個屬性。一般推薦使用小駝峰命名法

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

react與vue不同，vue可以通過在script中設置scoped來限制樣式的生效范圍，不至于樣式污染,

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

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

1.css modules是默認開啟的，所以我們只需要將原先的.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是一堆啥玩意的名字，實際上它 是 App--<hash數值>，這個 hash 值是全局唯一的，比如通過文件路徑來獲得，這樣 class 名稱就做到了全局唯一。

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

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論