reactjs - Material UI v5 -> 如何设置自动完成选项的样式

Question

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

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

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" />}
  onChange={(_e, val) => setPriority(val)}
  sx={{
    '& .MuiAutocomplete-option': {
      backgroundColor: '#000',
    },
    '& .Mui-focused': {
      backgroundColor: 'red',
    },
  }}
  open
/>

这似乎没有任何效果。我已经为此工作了将近 2 个小时，但似乎无法到达终点线。任何帮助将不胜感激。

Answer 1

我遇到了同样的问题；结果我只需要探索 Autocomplete API docs' Props section再远一点。如果您不想处理全局主题定制，则有几种定制可能性:

1. PaperComponent 属性允许自定义“用于呈现弹出窗口主体的组件。”请注意，只需使用 sx 在 Autocomplete 上不起作用，因为(正如@bnays-mhz 指出的那样)PaperComponent 嵌套在 PopperComponent 中DOM 树(用于 z-index/modal UX 目的)。
2. renderGroup 属性允许覆盖选项组 header 的呈现。
3. renderOption 属性允许覆盖单个选项的呈现。