css - :global (colon global) do? 是什么

Question

在某些 SCSS 文件中，我看到以下内容:

:global {
  /* ... */
}

不知道是SCSS特性还是CSS特性。 我尝试搜索它，但第一眼找不到任何好的结果。

Answer 1

此运算符用于 CSS Modules .模块化 CSS 使用 CSS 模块编译器在各自的模块(例如 React 组件)内限定 CSS 样式的范围。

这是来自 React 模块的示例(在文件 ErrorMessaging.less 中用于 ErrorMessaging.jsx React 组件):

:global(.ocssContainer) {
  .ui_column {
    padding-left: 0;
  }
}

这被编译成:

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ErrorMessaging__ui_column--3uMUS {
    padding-left: 0;
  }

但现在我添加了一个 :global修饰符到 .ui_column :

:global(.ocssContainer) {
  :global(.ui_column) {
    padding-left: 0;
  }
}

这就是它编译的结果:

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ui_column {
    padding-left: 0;
  }

现在.ui_column可以应用于具有该样式的任何子元素，包括在子 React 组件中，而不仅仅是 .ui_column属于 ErrorMessaging 的元素 react 组件。