在MUI自动完成中删除鼠标左键上的高亮显示

Question

使用Autocomplete并将鼠标悬停在选项列表上，然后将鼠标移出该列表，将鼠标悬停在其上的最新选项保留为高亮显示。

当鼠标指针完全在列表之外时，删除高亮显示的最好方法是什么？

Answer 1

您可以添加mouseenter和mouseleave处理程序，以了解鼠标何时位于Listbox内部，并在鼠标位于外部且选项被聚焦时覆盖背景。请注意，double ampersand是必要的，以增加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" />}
  />
);

实时演示

​

​