：global（colon global）有什么作用？ [英] What does :global (colon global) do?

问题描述

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

In some SCSS files, I see the following:

:global {
  /* ... */
}

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

I don't know if it is an SCSS feature or a CSS feature. I tried searching about it but couldn't find any good results at first sight.

推荐答案

使用此运算符在 CSS模块中。模块化CSS使用CSS模块编译器将CSS样式的作用域限定在它们各自的模块（例如React组件）中。

This operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope CSS styles within their respective modules (e.g., React component).

下面是一个React模块的示例（在文件<$中） ErrorMessaging.jsx React组件的c $ c> ErrorMessaging.less ：

Here's an example from a React module (in the file ErrorMessaging.less for the ErrorMessaging.jsx React component):

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

它被编译为：

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

但是现在我添加了：global 修饰符到 .ui_column ：

But now I add a :global modifier onto .ui_column:

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

这就是它的编译结果：

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

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

Now .ui_column can apply to any child element with that style, including in a child React component, and not just .ui_column elements that are part of the ErrorMessaging React component.

这篇关于：global（colon global）有什么作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！