reactjs - 在 MUI 自动完成中删除鼠标离开时的突出显示

Question

使用Autocomplete并悬停在选项列表上，然后将鼠标移出它会留下最新的选项，即鼠标悬停在的选项仍然突出显示。

当鼠标指针完全不在列表之外时，删除突出显示的最佳方法是什么？

标签： reactjsmaterial-ui

Answer 1

您可以添加mouseenter和mouseleave处理程序以了解鼠标何时在内部，Listbox如果鼠标在外部并且选项已聚焦，则覆盖背景。请注意，为了增加 CSS 特异性并将您的样式置于 MUI 的样式之上，需要使用双 & 符号：

const [mouseInListBox, setMouseInListBox] = React.useState(false);

return (
  <Autocomplete
    {...props}
    ListboxProps={{
      onMouseEnter: () => setMouseInListBox(true),
      onMouseLeave: () => setMouseInListBox(false),
      sx: {
        '&& li.Mui-focused': {
          bgcolor: !mouseInListBox ? 'white' : undefined,
        },
      },
    }}
    renderInput={(params) => <TextField {...params} label="Movie" />}
  />
);

现场演示