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

Question

我正在尝试将一些基本样式应用于 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" />}
  onChange={(_e, val) => setPriority(val)}
  sx={{
    '& .MuiAutocomplete-option': {
      backgroundColor: '#000',
    },
    '& .Mui-focused': {
      backgroundColor: 'red',
    },
  }}
  open
/>

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

Answer 1

function CustomPaper({ children }) {
  return (
    <Paper 
      sx={{
        "& .MuiAutocomplete-listbox": {
          "& .MuiAutocomplete-option[aria-selected='true']": {
            bgcolor: "purple",
            "&.Mui-focused": {
              bgcolor: "purple",
            }
          }
        },
        "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused": {
          bgcolor: "red",
        }
      }}
    >
      {children}
    </Paper>
  );
}

根据 Lars 的回答，这里有一个使用自定义 Paper 组件的示例。只需将自定义 Paper 组件名称传递给 Autocomplete 上的 PaperComponent 属性即可

<Autocomplete PaperComponent={CustomPaper} {...blahBlahOtherProps} />

。如果您不想覆盖所有自动完成组件的主题，这种方法很好。

Answer 2

我也遇到了同样的问题；事实证明，我只需要进一步探索

Autocomplete

API 文档的 Props 部分。如果您不想处理全局主题定制，有多种定制可能性：

1. PaperComponent

   属性允许自定义 “用于渲染弹出窗口主体的组件。” 请注意，仅在

   sx

   上使用

   Autocomplete

   在这里不起作用，因为（如 @bnays-mhz 指出的） out)

   PopperComponent

   嵌套在主 DOM 树之外的

   PaperComponent

   （用于 z-index/modal UX 目的）。

2. renderGroup

   属性允许覆盖选项组标题的呈现。

3. renderOption

   属性允许覆盖各个选项的渲染。

Answer 3

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

'.MuiAutocomplete-popper'

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

Answer 4

我也遇到了这个问题并找到了解决方案。 您可以尝试使用“sx”属性设置选项、单个选项的 css，并在自动完成中悬停（聚焦）时

自定义可在 Mui V5 中使用的 AutoComplete 组件的简单方法

  <Autocomplete
  limitTags={1}
  disablePortal
  id="simple-search"
  value={select.region}
  onChange={handleChange("region")}
  options={region}
  sx={{
  width: { sm: "100%", md: 340 },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option": 
      {
        backgroundColor: "#363636",
      },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
      {
        backgroundColor: "#4396e6",
      },
  "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true'] .Mui-focused":
      {
        backgroundColor: "#3878b4",
      },
    }}
 disableCloseOnSelect
 multiple
 renderInput={(params) => (
      <TextField {...params} label="Region" color="info" />
     )}
  />

Answer 5

您可以使用功能组件中的 makeStyle() 和以下属性来覆盖自动完成列表项的样式：

'@global': {
    '& .MuiAutocomplete-popper': {
        '& .MuiPaper-root': {
            '& .MuiAutocomplete-listbox': {
                '& li': {
                    fontSize: '14px !important',
                    paddingTop: 0,
                    paddingBottom: 0
                }
            }
        }
    },
  },

因为它是在 DOM 的根元素中创建的。

Answer 6

如果您只需要自定义样式 CustomPaper 组件可能有点大材小用（我在尝试时也遇到了一些 TypeScript 问题）。

对于简单的样式，您可以使用 [slotProps][1]:

<Autocomplete
  slotProps={{
    paper: {
      sx: {
        '& .MuiAutocomplete-listbox': {
          '& .MuiAutocomplete-option': {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
          },
        },
      },
    },
  }}
  ... 

  />


  [1]: https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-slotProps