能否在CSS/SCSS Modules中引用常规类名以覆盖组件样式？

当然可以用CSS/SCSS Modules实现第三方组件（比如DevExtreme、Material-UI）的样式覆盖，核心是利用CSS Modules提供的:global选择器来跳过模块化的类名哈希处理——毕竟第三方组件的类名是全局生效的，直接写在CSS Modules里会被加上唯一哈希，导致无法匹配。

方法1：全局覆盖（谨慎使用） #

如果要全局修改所有同类型第三方组件的样式，可以直接用:global包裹第三方的类选择器：

// 比如在你的样式文件（如App.module.scss）里
:global(.dx-texteditor.dx-editor-filled .dx-texteditor-input) {
    padding: 0;
}

这样这段样式会被编译成全局样式，不会被加上哈希前缀，就能选中所有DevExtreme的Textbox输入框。

方法2：局部作用域内覆盖（推荐） #

为了避免全局样式污染，更推荐把第三方样式的覆盖嵌套在当前组件的局部类名下，只影响当前组件内的第三方元素：

// MyTextboxComponent.module.scss
.myTextboxContainer {
  // 嵌套在局部类里的:global选择器，只会影响这个容器内的第三方组件
  :global(.dx-texteditor.dx-editor-filled .dx-texteditor-input) {
    padding: 0;
  }
}

然后在React组件中给第三方组件的容器加上这个局部类：

import styles from './MyTextboxComponent.module.scss';
import { Textbox } from 'devextreme-react';

export default function MyTextboxComponent() {
  return (
    <div className={styles.myTextboxContainer}>
      <Textbox />
    </div>
  );
}

这种方式既保留了CSS Modules的局部作用域优势，又精准覆盖了目标组件的样式，不会影响其他地方的同类型组件。

关键原理 #

CSS Modules默认会给所有类名添加唯一哈希前缀（比如.myTextboxContainer变成.myTextboxContainer_xyz789），以此实现局部作用域。但第三方组件的类名是固定的全局类（比如.dx-texteditor），所以必须用:global()包裹这些类选择器，告诉CSS Modules不要给它们加哈希，这样才能正确匹配到第三方组件的DOM元素。

内容的提问来源于stack exchange，提问作者hokwanhung