React AntD Select组件鼠标离开后悬停样式残留如何解决？

提供两种可直接落地的实现方式，按需选择即可：

1. 纯CSS覆盖（推荐） #

无需修改业务逻辑，仅通过样式优先级覆盖默认行为，给Select外层套一个自定义类名的容器，加入以下样式：

/* 自定义容器类名可根据你的项目规范调整 */
.custom-select-container:not(:hover) .ant-select-item-option-hover:not(.ant-select-item-option-selected) {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.85) !important; /* 可替换为你项目中Select选项的默认文字颜色 */
}

如果你的项目对AntD组件类名做了自定义前缀，把ant-替换为你配置的前缀即可。

2. JS事件监听（兼容性更强） #

如果存在样式优先级冲突、或者需要兼容极端场景，可通过监听下拉框鼠标离开事件，手动清除悬停类：

import { Select } from 'antd';
import { useRef } from 'react';

const CustomSelect = () => {
  const selectRef = useRef(null);

  const clearHoverStyle = () => {
    const hoverOptions = selectRef.current?.querySelectorAll('.ant-select-item-option-hover');
    hoverOptions?.forEach(option => {
      option.classList.remove('ant-select-item-option-hover');
    });
  };

  return (
    <Select
      ref={selectRef}
      dropdownProps={{
        onMouseLeave: clearHoverStyle
      }}
      // 保留你原有Select的所有配置
      options={[
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]}
    />
  );
};

export default CustomSelect;

内容的提问来源于stack exchange，提问作者Deniss M.