MUI 5 Autocomplete：修改禁用选项样式为实色而非透明度

你的代码存在两个核心问题导致样式不生效：

1. CSS语法错误：选择器末尾多了一个冒号（: {），正确写法需去掉该冒号
2. 样式优先级不足，需确保自定义样式能覆盖MUI默认样式

以下是两种可行的实现方式：

方式一：直接用sx prop设置 #

在Autocomplete组件中通过sx属性指定样式，简洁且优先级足够：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function Demo() {
  const options = [
    { label: '可用选项1', value: 1 },
    { label: '禁用选项', value: 2, disabled: true },
    { label: '可用选项2', value: 3 },
  ];

  return (
    <Autocomplete
      options={options}
      getOptionDisabled={(option) => option.disabled}
      renderInput={(params) => <TextField {...params} label="示例" />}
      sx={{
        '& .MuiAutocomplete-option[aria-disabled="true"]': {
          opacity: 1,
          color: 'red',
          // 可选：禁用hover效果，优化交互体验
          '&:hover': {
            backgroundColor: 'transparent',
            cursor: 'not-allowed',
          }
        }
      }}
    />
  );
}

方式二：用styled组件封装复用样式 #

如果需要在多个组件中复用该样式，可使用MUI的styled方法封装自定义Autocomplete：

import { Autocomplete as MuiAutocomplete } from '@mui/material';
import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const StyledAutocomplete = styled(MuiAutocomplete)(({ theme }) => ({
  '& .MuiAutocomplete-option[aria-disabled="true"]': {
    opacity: 1,
    color: theme.palette.error.main, // 可使用主题色统一风格
    '&:hover': {
      backgroundColor: 'unset',
      cursor: 'not-allowed',
    }
  }
}));

export default function Demo() {
  const options = [
    { label: '可用选项1', value: 1 },
    { label: '禁用选项', value: 2, disabled: true },
    { label: '可用选项2', value: 3 },
  ];

  return (
    <StyledAutocomplete
      options={options}
      getOptionDisabled={(option) => option.disabled}
      renderInput={(params) => <TextField {...params} label="示例" />}
    />
  );
}

关键说明 #

• 移除选择器末尾多余的冒号是修复原代码的核心步骤
• 设置opacity: 1可覆盖MUI默认的半透明效果，再指定所需实色即可
• 可选添加鼠标样式和禁用hover背景色，让禁用状态的交互反馈更清晰

内容的提问来源于stack exchange，提问作者assembler