:global 是 CSS Modules 中用于声明全局样式的语法，解决第三方组件或原生标签样式无法覆盖的问题；它使括号内选择器不哈希、原样输出，仅作用于直接包裹的内容，不可嵌套或与 :local 混用。
什么是 :global，它解决什么问题？
CSS Modules 默认会将类名局部化（如 button 编译成 Button_button__abc123），这导致你无法直接覆盖第三方组件、HTML 原生标签或全局 UI 框架（如 Ant Design、Bootstrap）的样式。当你需要强制让某条 CSS 规则逃逸局部作用域、真正“全局生效”时，就得用 :global。
它不是选择器修饰符，而是作用域声明：括号内所有选择器都不做哈希处理，原样输出到 CSS 中。
:global 的正确写法和常见错误
:global 必须紧贴选择器，且只影响其直接包裹的内容。容易出错的写法包括：
-
错误：把
:global放在嵌套块外层，以为能“批量全局化”立即学习“前端免费学习笔记（深入）”；
:global { .btn { color: red; } /* ❌ 这里 :global 不是有效语法 */ } -
正确：用
:global(...)包裹具体选择器✅
:global(.ant-btn) { color: blue; }✅
:global(html) body { margin: 0; }✅
.my-comp :global(.icon) { width: 16px; }—— 父子组合中仅.icon全局
注意：:global 不能嵌套使用，也不能和 :local 混用在同一选择器中。
什么时候必须用 :global，什么时候不该用？
必须用的场景：
- 覆盖第三方组件库的默认样式（如
:global(.ant-modal-body) { padding: 20px; }） - 重置基础标签样式（如
:global(h1), :global(p) { margin: 0; }） - 配合 CSS-in-JS 库注入的动态类名（如某些图表库生成的
chart-series-1）
不该用的场景：
- 你自己写的组件内部样式 —— 应该保持局部化，避免意外污染
- 仅为了“偷懒不写 BEM”而全局化通用类名（如
:global(.title)），这会破坏模块隔离性 - 在 SSR 场景下对
body或html添加样式时未考虑服务端与客户端一致性（可能触发 hydration mismatch）
与 :local 并存及性能注意事项
CSS Modules 允许在同一个文件里混用 :global 和 :local（后者其实是默认行为，可省略）。但要注意：
-
:global规则不会参与模块导出，即import styles from './Button.module.css'中拿不到:global类名 - 所有
:global输出的 CSS 会直接进入全局样式表，可能被后续加载的 CSS 覆盖（顺序敏感） - 大量使用
:global会削弱 CSS Modules 的核心价值：可预测的样式作用域。尤其在微前端或多团队协作项目中，全局样式冲突更难定位
真正棘手的是那些看似“局部”实则依赖全局上下文的规则，比如 @keyframes 或 @font-face —— 它们天生全局，不需要也不支持 :global 包裹，但必须确保定义位置不会被 CSS Modules 误处理（通常建议单独抽离到非 module 文件中）。
