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

【问题标题】：MaterialUI v5 -> How to style Autocomplete optionsMaterial UI v5 -> 如何设置自动完成选项的样式
【发布时间】：2022-08-09 10:21:35
【问题描述】：

我正在尝试将一些基本样式应用于 MUI v5 中的自动完成组件内的选项。我只是想改变悬停时的背景颜色，并根据它是否被选中。我根据文档尝试了 2 种方法，使用主题，并将 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\"] 样式。否则它是组件附带的默认灰色，我不明白为什么。

我尝试的第二条路径是在 Autocomplete 组件上使用 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 个小时，但似乎无法到达终点线。任何帮助将不胜感激。

标签： reactjs material-ui

【解决方案1】：

您可以通过定位类覆盖自动完成选项 css

'.MuiAutocomplete-popper'

您必须全局应用 css，因为该节点是在 DOM 的根元素之外创建的。

【讨论】：

谢谢。我实际上能够通过主题来解决它。它只是与将正确的课程纳入主题有关。我在检查器中花了一些时间在我正在设计的元素上找到正确的类
好吧，你能为我们其他人发布解决方案吗，请@travis_moulton

【解决方案2】：

我有同样的问题;原来我只需要进一步探索Autocomplete API docs' Props section。有几种定制可能性：

PaperComponent 属性允许自定义“[t] 用于呈现弹出框主体的组件。”请注意，在Autocomplete 上简单地使用sx 在这里不起作用，因为（正如@bnays-mhz 指出的那样）PopperComponent PaperComponent 嵌套在主DOM树之外的生活中（对于z-index/modal用户体验目的）。
renderGroup 属性允许覆盖选项组标题的呈现。
renderOption 属性允许覆盖单个选项的呈现。

【讨论】：