如何修改AntD Text Button鼠标悬停时的背景颜色？

方案1：全局样式覆盖 #

直接在全局CSS/SCSS文件中添加以下代码，可对所有Text Button生效：

.ant-btn-text:hover {
  background-color: #f0f5ff; /* 替换为你需要的颜色 */
  /* 若AntD默认样式优先级更高，可添加!important提升优先级 */
  /* background-color: #f0f5ff !important; */
}

方案2：SCSS Module局部穿透（不污染全局） #

如果只想让特定组件内的Text Button生效，在组件对应的SCSS Module文件中用:global穿透模块化规则：

/* 自定义类名，用于绑定到组件的Button上 */
.textBtnHover {
  :global(.ant-btn-text:hover) {
    background-color: #e6f7ff;
  }
}

然后在React组件中给Button绑定该类：

import { Button } from 'antd';
import styles from './YourComponent.module.scss';

// 使用示例
<Button type="text" className={styles.textBtnHover}>
  文本按钮
</Button>

问题原因说明 #

• 内联样式无法实现伪类：React内联样式不支持:hover这类CSS伪类，只能通过CSS类的方式实现。
• SCSS Module仅作用于文本：SCSS Module会自动给自定义类名添加哈希前缀，直接写.ant-btn-text:hover会被解析为[哈希前缀].ant-btn-text:hover，无法匹配AntD的全局类.ant-btn-text，必须用:global包裹AntD的类名，让该选择器跳过模块化处理，才能正确选中按钮元素。

内容的提问来源于stack exchange，提问作者m3.b