在 React 中更改 MUI 自动完成组件 GroupLabels 的外观答案

【问题标题】：Change the appearance of the MUI Autocomplete components GroupLabels in React在 React 中更改 MUI 自动完成组件 GroupLabels 的外观
【发布时间】：2021-10-23 05:19:57
【问题描述】：

我正在尝试在我的网站中使用 React Material-UI 中的自动完成组件，并且我已经设法自定义列表元素的外观以使用深色背景显示，如下图所示：

问题是我不知道如何设置这个列表的组标签的样式。在这个项目中，我必须使用类组件，所以我不能使用使用 React-Hooks 的解决方案。我想我可以通过覆盖这个组件的 CSS 以某种方式实现它，但我不知道如何。我已经尝试通过使用 createMuiTheme() 函数并覆盖 MuiListSubheader 样式来解决这个问题，但遗憾的是这也不起作用。在文档中，我看到自动完成组件在“类”道具中有一个“groupLabel”键，但由于某种原因，我只能在该键中输入一个字符串。

我设法使用自动完成组件的“PaperComponent”道具设置列表项的样式，但我找不到列表子标题的类似解决方案。

提前感谢您的帮助！

【问题讨论】：

你能分享你的代码吗？

标签： css reactjs typescript material-ui

【解决方案1】：

我设法通过像这样将 PopperComponent 传递给自动完成来做到这一点：

<Autocomplete PopperComponent={StyledPopper}></Autocomplete>

这个 StyledPopper 是使用 MUI v5 样式组件定义的：

const StyledPopper = styled(Popper)(({ theme }) => ({
  '& .MuiAutocomplete-groupLabel': {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
  },
}));

您还可以使用 '& .MuiAutocomplete-paper' 为其中的纸张设置样式

【讨论】：