react的CSS中 :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 {
   .title{    }
}

三、使用場景

　　我們使用的組件的樣式大部分都是全局樣式，使用局部方式聲明class經過編譯后，無法與組件的默認樣式class匹配，樣式自然就無法進行覆蓋。

　　要覆蓋默認樣式就需要使用全局樣式，需要使用global聲明的class。這樣就不會被編譯成哈希字符串也就能夠覆蓋默認樣式了。