在 MUI 自動完成中刪除鼠標離開時的突出顯示

Question

使用Autocomplete並將鼠標懸停在選項列表上，然后將鼠標移出它會留下最新的選項，即鼠標懸停在上面的選項，仍然突出顯示。

當鼠標指針完全位於列表之外時，刪除突出顯示的最佳方法是什么？

Answer 1

您可以添加mouseenter和mouseleave處理程序以了解鼠標何時位於Listbox ，如果鼠標位於Listbox並且選項處於焦點，則覆蓋背景。 請注意，雙 & 號對於增加 CSS 特異性並將您的樣式置於 MUI 之上是必要的：

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

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

現場演示