小编tra*_*ton的帖子

我正在尝试将一些基本样式应用于 MUI v5 中的自动完成组件内的选项。我只是想根据是否选择它来更改悬停时的背景颜色。我尝试了两种基于文档的方法，使用主题，并将 sx 属性应用于自动完成。

使用主题几乎让我在那里，代码如下：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        option: {
          '&[aria-selected="true"]': {
            backgroundColor: '#e3abed',
          },

          '&:hover': {
            backgroundColor: '#9c27b0',
          },
          backgroundColor: '#fff',
        },
      },
    },
  },
})

我将 ThemeProvider 包裹在我的整个应用程序中

和组件：

<Autocomplete
  options={['1', '2', '3']}
  renderInput={(params) => <TextField {...params} label="Priority" />}
  onChange={(_e, val) => setPriority(val)}
/>

所以，这几乎有效。然而，只有当我将鼠标悬停在下拉列表中的另一个选项上时，才会应用 [aria-selected="true"] 样式。否则它是组件附带的默认灰色，我不明白为什么。

我尝试的第二条路径是在自动完成组件上使用 sx 属性。在文档中，它表示您可以通过类名称来定位子组件：https://mui.com/material-ui/customization/how-to-customize/#overriding-styles-with-class-names

这是我的组件：

<Autocomplete
  options={['1', '2', '3']}
  renderInput={(params) => <TextField {...params} label="Priority" />} …