如何在MUI Autocomplete组件鼠标离开列表时移除选项高亮

你可以根据自己的实现场景选JS逻辑控制或者CSS样式控制两种方案，都是生产环境常用的稳定实现：

方案1：JS事件控制（自研组件/需要自定义交互逻辑的场景优先选） #

核心逻辑是用统一状态管理高亮索引，监听列表容器的鼠标移出事件重置状态：

• 组件内维护highlightedIndex状态，默认值为-1（代表无高亮选项）
• 给每个选项绑定mouseenter事件，触发时将highlightedIndex更新为当前选项的索引，匹配该索引的选项挂载高亮样式
• 给整个选项列表的外层容器绑定mouseleave事件，触发时直接将highlightedIndex重置为-1即可自动清除所有选项的高亮状态

注意如果同时支持键盘上下键切换高亮，要保证键盘逻辑和鼠标逻辑共用同一个highlightedIndex状态，避免出现状态冲突导致的高亮异常。

方案2：CSS控制（用第三方组件库不想改源码的场景优先选） #

不需要改组件逻辑，直接用CSS伪类限制高亮样式的生效范围即可，以Ant Design的AutoComplete组件为例，样式示例如下：

/* 仅当下拉容器处于鼠标悬停状态时，才展示选项的高亮样式 */
.ant-select-dropdown:not(:hover) .ant-select-item-option-active {
  background-color: transparent !important;
  color: inherit !important;
}

如果是其他组件库，只需要把选择器替换成对应组件的下拉容器类名、高亮选项类名即可。

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