React中如何保持Ant Design Dropdown组件点击后背景色不变

问题原因 #

Antd Dropdown的弹出菜单在失焦、鼠标移出后，会触发内置的:focus-within、:hover状态样式，优先级高于你自定义的背景样式，部分版本还会给失焦的弹出层附加过渡类，导致背景透明显现。

解决方案 #

方案1：CSS样式直接覆盖

该方案适用于自定义全局样式的场景，保证选择器优先级高于Antd内置样式即可生效：

/* 覆盖所有状态下的下拉菜单背景 */
.ant-dropdown-menu,
.ant-dropdown-menu:hover,
.ant-dropdown-menu:focus-within,
.ant-dropdown-menu:has(.ant-dropdown-menu-item-focused) {
  background-color: #ffffff !important;
}
/* 点击触发模式下额外覆盖弹出态的过渡背景 */
.ant-dropdown.ant-dropdown-open .ant-dropdown-menu {
  background-color: #ffffff !important;
}

注意要确保你的自定义CSS文件引入顺序在Antd样式文件之后，避免被默认样式覆盖。

方案2：主题配置（更推荐）

如果项目用了Antd的主题配置能力，直接修改对应token即可，无需写全局覆盖样式：

import { ConfigProvider } from 'antd';

// 在应用外层包裹ConfigProvider，或者单独包裹用到Dropdown的业务模块
<ConfigProvider
  theme={{
    components: {
      Dropdown: {
        colorBgElevated: '#ffffff',
      },
    },
  }}
>
  {/* 业务代码 */}
</ConfigProvider>

如果上述方案仍不生效，可以打开浏览器开发者工具的元素面板，选中失焦后的下拉菜单DOM，查看当前生效的背景样式对应的选择器，直接复用该选择器添加自定义背景样式即可。

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