代码之家 › 专栏 › 技术社区 › assembler

MUI 5自动完成将禁用的项目样式更改为不使用不透明

autocomplete material-ui reactjs

assembler · 技术社区 · 1 年前

在MUI 5自动完成中,我需要覆盖禁用的选项样式,以纯色显示它们,而不是不透明度。

我试过了:

    '& .MuiAutocomplete-option[aria-disabled="true"]': {
      color: 'red',
      opacity: 1
    }

但是该组件完全忽略了这些样式。我怎样才能做到这一点?

This 是沙盒。

1 回复 | 直到 1 年前

Ahmet Emre Kilinc 1 年前

你需要通过 sx 通过 popper 的属性 slotProps 这样地:

slotProps={{
    popper: {
      sx: {
        '& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-disabled="true"]':
          {
            color: 'red',
            opacity: '1',
          },
      },
    },
  }}

你可以看看 this StackBlitz 以获取此解决方案的实际工作示例。

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

10 月前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

1 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

1 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

1 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

1 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

1 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

1 年前