如何在Ant Design 5中配合模块化SCSS覆盖组件样式？

问题根源 #

模块化SCSS会给自定义类名自动添加唯一哈希后缀（比如.custom-heading变成.custom-heading_abc123），但Ant Design的内置类名（如.ant-typography）属于全局类，不会被模块化处理。当你在模块化SCSS中写.custom-heading .ant-typography时，编译后是.custom-heading_abc123 .ant-typography，理论上能选中元素，但可能因为Ant Design的样式优先级更高，或者写法没匹配到正确DOM结构，导致样式不生效。而普通SCSS没有哈希处理，全局类直接生效，所以能覆盖。

具体解决方案 #

1. 用:global()包裹AntD内置类（推荐）

在模块化SCSS中，明确标记AntD的类为全局类，避免被模块化规则干扰：

// Head.module.scss
.custom-heading {
  :global(.ant-typography) {
    color: #ff4d4f;
    font-size: 28px;
    line-height: 1.4;
  }
}

组件中正常引入并使用自定义类：

import styles from './Head.module.scss';

// 组件内
<Typography.Title className={styles.customHeading}>自定义标题</Typography.Title>

2. 提升选择器优先级

如果不想用:global()，可以通过更具体的选择器提升权重，比如结合元素标签或直接子元素选择器：

// Head.module.scss
.custom-heading {
  & > h1.ant-typography {
    color: #ff4d4f;
    font-size: 28px;
  }
}

应急情况下可以用!important（不推荐，会增加样式维护成本）：

.custom-heading {
  .ant-typography {
    color: #ff4d4f !important;
  }
}

3. 用AntD主题配置替代样式覆盖（最优雅）

直接通过AntD的ConfigProvider自定义主题，从根源修改组件样式，无需手动覆盖：

import { ConfigProvider, Typography } from 'antd';

const customTheme = {
  token: {
    typography: {
      headingColor: '#ff4d4f',
      headingFontSizeLG: '28px', // 对应Title组件的large尺寸
    },
  },
};

function MyComponent() {
  return (
    <ConfigProvider theme={customTheme}>
      <Typography.Title level={1}>自定义标题</Typography.Title>
    </ConfigProvider>
  );
}

4. 确认模块化SCSS的使用规范

• 导入时必须用import styles from './xxx.module.scss'的形式
• 组件中使用类名时，要对应模块化后的驼峰命名（比如SCSS中的.custom-heading对应styles.customHeading）

内容的提问来源于stack exchange，提问作者Evgeniy S.