:global 是什么

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

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

📦 背景：什么是 CSS Modules？

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

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

在编译后会变成类似：

.title__abc123 {
  color: red;
}

这样可以避免样式冲突。

---

🤔 那什么时候需要 :global？

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

• 重置样式
• 修改第三方库的类名
• 给 body、html、.ant-btn 这类通用选择器写样式

这时就需要用 :global。

---

🧪 示例用法

1. 全局选择器

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

2. 混合局部与全局

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

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

3. 全局类名

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

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

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

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

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

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

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

---

🛠 哪些工具支持 :global？

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

• css-loader（配合 Webpack 使用）
• styled-jsx（Next.js）
• Sass Modules（部分情况下）
• postcss-modules