为何无法使用CSS Modules为AntD组件设置样式？

• 使用AntD官方CSS-in-JS方案（适配AntD 5+）
  AntD 5及以上版本支持通过css属性直接给组件注入自定义样式，能直接穿透组件内部，无需!important。示例代码：

  import { Button } from 'antd';
  import { css } from '@emotion/react';
  
  const customButton = css`
    background-color: #25b864;
    border-radius: 6px;
    &:hover {
      background-color: #1d9954;
    }
  `;
  
  export default function CustomBtn() {
    return <Button type="primary" css={customButton}>自定义按钮</Button>;
  }
  

• CSS Modules全局选择器穿透
  CSS Modules默认是局部作用域，要覆盖AntD的全局类名，用:global()包裹目标选择器即可，同时通过父元素的局部类名限定作用范围，避免全局污染。示例：

  /* YourComponent.module.css */
  .btnWrapper :global(.ant-btn-primary) {
    background-color: #25b864;
    border-color: #25b864;
  }
  

  组件中使用：

  import styles from './YourComponent.module.css';
  import { Button } from 'antd';
  
  export default function Demo() {
    return (
      <div className={styles.btnWrapper}>
        <Button type="primary">带自定义样式的按钮</Button>
      </div>
    );
  }
  

• 提升选择器权重替代!important
  通过组合父元素类名、增加选择器层级的方式，让自定义样式的权重超过AntD默认样式。比如：

  /* 权重高于.ant-btn-primary */
  .custom-container .ant-btn-primary {
    background-color: #25b864;
    border-color: #25b864;
  }
  

  只要选择器权重足够，就能自然覆盖默认样式，无需依赖!important。

• 全局主题定制（适合批量修改）
  如果需要全局统一修改AntD组件样式，直接通过主题配置修改默认变量更高效。以Vite项目为例：

  // vite.config.js
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import less from 'vite-plugin-less';
  
  export default defineConfig({
    plugins: [
      react(),
      less({
        lessOptions: {
          modifyVars: {
            '@primary-color': '#25b864',
            '@btn-border-radius-base': '6px',
          },
          javascriptEnabled: true,
        },
      }),
    ],
  });
  

  这种方式从根源替换样式，不需要额外写覆盖代码。

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