MUI Autocomplete组件键盘滚动选项无高亮提示如何解决

原因说明 #

MUI的Autocomplete默认内置了键盘聚焦高亮逻辑，没有单独的开启配置，出现无高亮的现象通常是两种情况：

• 自定义renderOption渲染函数时，没有透传组件内置props、也没有使用focused状态参数绑定高亮样式
• 默认主题的聚焦高亮样式对比度较低，和你的页面背景色接近，导致视觉上无法识别

解决方案1：修复自定义选项渲染逻辑 #

如果你重写了renderOption属性，需要接收第三个参数里的focused状态，手动绑定高亮样式，同时必须透传props保证键盘事件正常生效，示例代码：

<Autocomplete
  options={options}
  renderOption={(props, option, { selected, focused }) => (
    <li {...props}
      style={{
        backgroundColor: focused ? '#e3f2fd' : selected ? '#f5f5f5' : 'transparent',
        fontWeight: focused ? 600 : 400,
        ...props.style
      }}
    >
      {option.label}
    </li>
  )}
  // 其余配置保持不变
/>

注意不要删除li元素上的{...props}透传逻辑，组件内部的键盘事件、状态绑定都依赖这些内置属性

解决方案2：CSS覆写默认样式 #

如果没有自定义渲染逻辑，直接覆写MUI内置的聚焦选项类即可：

/* 全局CSS样式 */
.MuiAutocomplete-option.Mui-focused {
  background-color: #1976d220 !important;
  font-weight: 600;
}

如果使用styled组件封装，可以这么写：

import { styled } from '@mui/material/styles';
import Autocomplete from '@mui/material/Autocomplete';

const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
  '& .MuiAutocomplete-option.Mui-focused': {
    backgroundColor: theme.palette.primary.light + '20',
    fontWeight: 600,
  }
}));

内容的提问来源于stack exchange，提问作者D. Barman