如何修改MUI Autocomplete组件中选中选项的样式（multi模式）

要调整开启multi选项后Autocomplete的已选中高亮样式，根据使用场景可以选下面几种方式：

方式1：内联sx属性快速修改（适合单组件） #

修改下拉菜单中已选中选项的样式 #

直接通过ListboxProps给下拉列表容器添加样式，覆盖内部选中项的默认样式：

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

export default function MultiSelectDemo() {
  const options = ['选项1', '选项2', '选项3', '选项4'];

  return (
    <Autocomplete
      multiple
      options={options}
      renderInput={(params) => <TextField {...params} label="多选示例" />}
      ListboxProps={{
        sx: {
          '& .Mui-selected': {
            backgroundColor: '#a5d6a7', // 自定义选中背景色
            color: '#2e7d32', // 自定义选中文字颜色
            '&:hover': {
              backgroundColor: '#81c784', // hover时的背景色
            }
          }
        }
      }}
    />
  );
}

修改输入框内的选中标签样式 #

如果要调整输入框里带删除按钮的选中标签样式，直接在Autocomplete的sx中覆盖.MuiAutocomplete-tag类：

<Autocomplete
  multiple
  options={options}
  renderInput={(params) => <TextField {...params} label="多选示例" />}
  sx={{
    '& .MuiAutocomplete-tag': {
      backgroundColor: '#ffccbc',
      color: '#e64a19',
      '& .MuiAutocomplete-tagDeleteIcon': {
        color: '#e64a19', // 修改删除按钮颜色
      }
    }
  }}
/>

方式2：用styled封装可复用组件（适合多处使用） #

如果多个组件需要相同的样式，用MUI的styled创建自定义Autocomplete组件：

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

const StyledMultiAutocomplete = styled(Autocomplete)(({ theme }) => ({
  '& .Mui-selected': {
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.primary.dark,
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
    }
  },
  '& .MuiAutocomplete-tag': {
    backgroundColor: theme.palette.secondary.light,
    color: theme.palette.secondary.dark,
  }
}));

// 使用自定义组件
export default function ReusableMultiSelect() {
  const options = ['选项1', '选项2', '选项3'];
  return (
    <StyledMultiAutocomplete
      multiple
      options={options}
      renderInput={(params) => <TextField {...params} label="复用多选组件" />}
    />
  );
}

方式3：修改全局主题（所有组件生效） #

如果要让项目中所有Autocomplete多选组件都应用该样式，直接修改MUI主题：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const customTheme = createTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        tag: {
          backgroundColor: '#e3f2fd',
          color: '#1565c0',
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        selected: {
          backgroundColor: '#bbdefb',
          color: '#0d47a1',
          '&:hover': {
            backgroundColor: '#90caf9',
          },
        },
      },
    },
  },
});

// 在根组件中包裹主题
export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Autocomplete
        multiple
        options={['选项1', '选项2', '选项3']}
        renderInput={(params) => <TextField {...params} label="全局样式示例" />}
      />
    </ThemeProvider>
  );
}

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