:global 是什么

开发过程当中遇到了一种情况，在使用css模块化的前提下直接修改第三方组件样式无法成功，但是使用:global的形式就行，遂记录下。

:global 是在 CSS Modules 中使用的一个特殊语法，用来声明某段样式是全局的，不受 CSS Modules 的作用域限制。

当你在 React 等框架中使用 CSS Modules（例如 styles.module.css），它会自动把你的类名变成局部作用域，比如：

css 复制代码

/* styles.module.css */
.title {
  color: red;
}

在编译后会变成类似：

css 复制代码

.title__abc123 {
  color: red;
}

这样可以避免样式冲突。

有时你需要写一些全局样式，比如：

这时就需要用 :global。

css 复制代码

:global(body) {
  margin: 0;
  padding: 0;
}

css 复制代码

.container :global(.ant-btn) {
  color: blue;
}

这里的 .container 是局部作用域，而 .ant-btn 是全局类名（比如来自 Ant Design）。

css 复制代码

:global {
  .global-class {
    font-size: 16px;
  }
}

其中第二种，混合局部与全局是较为常见的用法，设想下在一个React组件中通过模块的方式引入了样式，例如下面这样：

css 复制代码

  //index.module.less
    .container {
        ...
    }

tsx 复制代码

import styles from "./index.module.less";

    ...
<div className={styles.container}>
    ...
<div/>

假如在container内部还有一个第三方的组件，这时如果需要修改第三方组件的样式，就需要通过:global的形式修改

css 复制代码

  //index.module.less
    .container {
        :global(xxx){
            
        }
    }

常见的前端工具都支持，比如：