使用样式自动完成 MUI 的纸质组件时，背景过滤器不起作用？答案

【问题标题】：back drop filter is not working when styling autocomplete MUI's paper component using?使用样式自动完成 MUI 的纸质组件时，背景过滤器不起作用？
【发布时间】：2022-01-09 01:36:41
【问题描述】：

我希望能够设置下拉背景的样式，这样当它打开后面的项目时，它会变得模糊，知道它应该定位哪个类吗？

  paper: {
    backdropFilter: 'blur(14px)',
    backgroundColor: 'rgba(104, 99, 99, 0.5)',
    '& .MuiAutocomplete-listbox': {
      '& li': { padding: 2 },
    },
  },
 
   <Autocomplete
          disabled={/*check?.length === 0*/ selected.group ? false : true}
          id='country-select-demo'
          PaperComponent={({ children }) => <Paper className={classes.paper}>{children}</Paper>}
          renderInput={(params) => (
            <TextField
              {...params}
             
            />
          )}
        />

【问题讨论】：

标签： material-ui

【解决方案1】：

如果您使用的是 MUI v5，那么您的 Paper 的 API 语法 is wrong。 className 应该是 classes。或者你可以只使用sx 属性。

PaperComponent={props => (
  <Paper
    {...props}
    sx={{
      color: '#fff', 
      background: 'rgba(104, 99, 99, 0.5)',
      backdropFilter: 'blur(14px)',
    }}
  />
)}

MUI v4 Codesandbox

【讨论】：

您的沙盒完全符合我的要求，请在使用类时将代码显示并附加到您的答案中，因为我使用的是 mui v4。
@Richardson 忽略我对classes 的评论——这只适用于 MUI v5。我已将我的沙箱更新到 MUI v4。
@Richardson Popper 组件是自动完成组件的一部分。如果存在内存泄漏，则在库端。考虑到 Autocomplete 是 v4 中的实验性组件，我不会感到惊讶。
很高兴知道，您的建议是迁移到 mui5。
我找到了一种方法，以防你有兴趣stackoverflow.com/questions/70637240/…