css(react)中 global

局部作用域

css的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效。產生局部作用域的唯一方法，就是使用一個獨一無二的class的名字，不會與其他選擇器重名，但是當我們與其他人共同開發的時候，無法保證一定與其他人不同，這時候就要用到css modules。

下面是一個React組件App.js

import React from 'react';
import style from './App.css';
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

上面代碼中，我們將樣式文件App.css輸入到style對象，然后引用style.title代表一個class

.title {
  color: red;
}

構建工具會將類名style.title編譯成一個哈希字符串。

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

App.css也會同時被編譯

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

這樣一來，這個類名就變成獨一無二了，只對App組件有效。

global

使用global聲明的class，都不會被編譯成哈希字符串。

:global {
...
}

:global(#root) {
　　...
}

不會把id為root的元素的 id 編譯成哈希字符串。

示例如下：

html：

 

css：

 

 編譯結果

 

 

-------------------

 

 編譯結果

 

 

相信到這里大家一看就明白了。