三个问题的根子是同一个：没有划分“谁有权改全局、谁只能改自己”。CSS Modules 只隔离了你自己写的类名，Antd 和第三方组件的类名（ant-*）本来就是全局的，所以只要覆写它们，就必然落在全局选择器空间里。要做的不是消灭 :global，而是把它锁进“局部根类之下”，并把真正全站生效的东西收归一处、定好归属。 一、先澄清“两个 .toolbar 优先级打架” 两个团队各写一个 .toolbar，编译后是 .toolbar_a1b2c 和 .toolbar_d3e4f，选择器本身不会互相命中。真出现“后加载的赢”，通常是下面三种情况之一，用 DevTools 的 Styles 面板看被划掉的是哪条规则就能判断： 同一个 DOM 元素同时拿到了两个团队的类，常见于共享组件把 className 透传给内部节点，两边都往里塞样式。 其中一方实际是用 :global(.toolbar) 或在 global.less 里写了裸 .toolbar，绕过了哈希。 同优先级规则靠源码顺序决胜，而异步路由拆出的 CSS chunk 加载顺序取决于用户访问路径，所以现象时有时无。 对应做法：共享组件的 className 只允许调用方传布局类（margin、position、宽度），不允许改内部视觉；视觉定制走组件自己暴露的 props。不要靠加载顺序，更不要用 !important 去赌，需要抬优先级时让规则挂在自己的根类下面，选择器天然比单类更具体。 二、Antd 覆写分三层，各层只做各层的事 全站主题层：颜色、圆角、字号这类全站统一的改动，走主题机制，不写选择器。Antd v5 用 ConfigProvider 的 theme.token / theme.components；v4 用 Less 的 modifyVars（构建期注入）。这一层放在平台组（或指定 owner）维护的文件里，加 CODEOWNERS，改动必须经过 owner 评审。出过两次事故的 global.less 应该收缩成只剩 reset 和少量全局变量。 组件封装层：团队内多处复用的定制，包一层自己的组件，例如 components/ui/Table，把 Antd 覆写写在这个组件自己的 index.module.less 里。需要改的地方只有一处，不会在各页面里各写一份。 页面局部层：只影响某一个页面或区块的覆写，用局部根类包住 :global： // pages/orders/index.module.less .root { .toolbar { display: flex; gap: 8px; } // 只在 .root 之内命中 antd 的类，不泄漏到其他页面 :global(.ant-table-thead > tr > th) { background: #fafafa; } } Less 嵌套后编译为 .root_xxxxx .ant-table-thead > tr > th，作用域被限制在根类下面。 Antd v5 的样式是 CSS-in-JS，生成的选择器里哈希类用 :where() 包裹，不增加优先级，所以单个 .ant-xxx 加一层局部根类就足以覆盖，不需要堆层级。v5 的多数组件还提供 classNames / styles 这类语义化属性，可以直接给内部节点传局部类名，完全不需要 :global，具体支持哪些组件以对应版本的文档为准。另外 v5.17 起 @ant-design/cssinjs 的 StyleProvider 支持 layer，把 Antd 样式放进 CSS @layer 里，你们自己的非 layer 样式天然优先，可以彻底摆脱顺序和优先级之争；升级前先确认你们实际的 antd 版本和目标浏览器对 @layer 的支持。 三、:global 的使用边界 可以定成几条硬规则： 允许：覆写第三方组件固定类名，且必须出现在局部类的后代位置，形如 .root :global(.xxx)。 禁止：文件顶层的 :global(...)、:global { ... } 块，以及在业务模块里为自己的类名加 :global。 全局样式只允许出现在平台 owner 的目录里，例如 src/styles/。 能用组件 props 或 classNames 传类名解决的，不写 :global。 这些规则靠人记不住，建议加一个粗筛脚本进 CI，抓顶层的 :global（要求代码经过 Prettier 格式化，嵌套写法缩进，顶层写法顶格）： # 业务模块里出现顶层 :global 就判失败 ! grep -rnE '^:global' src/pages src/components --include='*.module.less' 只是粗筛，写成 .a, :global(.b) 这种逗号形式抓不到，细节还是靠评审。 四、目录与命名约定 src/ styles/ # 平台 owner，CODEOWNERS 保护 global.less # 仅 reset + 全局变量 theme.ts # antd token / modifyVars components/ui/ # 对 antd 的二次封装，覆写写在这里 Table/index.tsx Table/index.module.less pages/<team>/<page>/ index.tsx index.module.less # 一个页面一个模块文件，一个 .root 命名上我不建议把 Toolbar_actions 这类“组件_元素”前缀手写进类名：CSS Modules 的哈希已经保证了隔离，手写前缀只是重复劳动。真正有价值的约定是：每个 .module.less 只有一个根类 .root，所有选择器都嵌套在根类下，类名用 camelCase，方便 styles.toolbar 直接取用。为了排查方便，可以把 css-loader 的 modules.localIdentName 设成包含文件名的形式，例如 [name]__[local]__[hash:base64:5]（Vite 对应 css.modules.generateScopedName），在 DevTools 里一眼能看出规则来自哪个文件。 五、落地顺序 先把 global.less 里所有 Antd 覆写盘点一遍，按影响范围分三类：全站主题的挪进 token / modifyVars，某个组件的挪进封装组件，某个页面的挪回页面模块。 给 src/styles/ 加 CODEOWNERS，并把上面的 grep 加进 CI。 共享组件的 className 约定写进文档，评审时按“只许布局”检查。 验证方式很直接：随便改一个页面模块里的 Antd 覆写，其他页面的 DOM 样式不应发生任何变化；真发生了，说明还有裸全局选择器没收干净。... 展开详请