如何修改React中Material UI AutoComplete组件选项的悬浮颜色

你之前的代码里，因为开启了disablePortal，下拉弹窗是Autocomplete的内部子元素而非同级元素，所以& + .MuiAutocomplete-popper这种同级选择器无法命中目标，导致样式不生效。下面是修正后的可直接使用的代码：

export default function SelectBox({ ...props }) {
  return (
    <Autocomplete
      autoComplete={true}
      disablePortal
      id="combo-box-demo"
      options={props.options}
      sx={{
        width: { xs: 100, sm: 130, md: 150, lg: 170 },
        // 设置下拉选项悬浮时的背景色
        '& .MuiAutocomplete-option:hover': {
          backgroundColor: '#FF8787', // 替换为你需要的自定义颜色
        },
        // 可选：修改已选中选项的默认背景色及悬浮色
        '& .MuiAutocomplete-option[aria-selected="true"]': {
          backgroundColor: '#E55555',
          '&:hover': {
            backgroundColor: '#FF6B6B',
          }
        }
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label={props.label}
          size='small'
          sx={{
            width: "80%",
            backgroundColor: "#F1F1F1",
            '.MuiOutlinedInput-notchedOutline': {
              borderColor: '#C6DECD',
            },
            borderRadius: 2,
            "&:hover .MuiOutlinedInput-notchedOutline": {
              borderColor: "green"
            },
            "&:hover": {
              "&& fieldset": {
                border: "1px solid green"
              }
            }
          }}
        />
      )}
    />
  );
}

关键说明： #

• 删掉了无用的ChipProps：这个属性仅在多选模式下控制选中标签（Chip组件）的样式，当前单选模式下不需要。
• 使用后代选择器& .MuiAutocomplete-option:hover：因为disablePortal开启后下拉选项是Autocomplete的内部子元素，后代选择器可以直接命中目标。
• 若需要区分已选中选项的悬浮状态，可在[aria-selected="true"]选择器内单独设置:hover样式。

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