如何修改material-ui/lab/Autocomplete组件的下拉选项背景颜色

算力阿峰

2026-10-21

解决方案

你需要同时覆盖 Autocomplete 下拉面板容器和单个选项的样式，按你当前使用 classes 注入样式的写法，修改步骤如下：

在你的样式文件中新增两类样式：

/* 对应单个下拉选项样式 */
.option {
  background-color: #ffffff !important;
  /* 同步修改文字颜色，避免白底白字无法识别 */
  color: #000000;
}
/* 对应整个下拉弹窗容器样式 */
.paper {
  background-color: #ffffff !important;
}

修改 Autocomplete 组件的 classes 配置，注入新增的paper样式：

<Autocomplete
  id="combo-box-demo"
  options={mitarbeiter}
  classes={{
    option: styles.option,
    // 新增下拉面板样式注入
    paper: styles.paper
  }}
  onChange={changer}
  getOptionLabel={(option) => option.email}
  fullWidth
  style={{width: 350}}
  renderInput={(params) => <TextField {...params} label="Mitarbeiter" variant="outlined" style={{ backgroundColor: "cyan !important" }}/>}
  required
/>

如果你不想单独维护样式文件，也可以直接用MUI自带的sx属性实现：

<Autocomplete
  id="combo-box-demo"
  options={mitarbeiter}
  sx={{
    // 修改单个选项样式
    '& .MuiAutocomplete-option': {
      backgroundColor: '#fff',
      color: '#000'
    },
    // 修改下拉面板样式
    '& .MuiAutocomplete-paper': {
      backgroundColor: '#fff'
    }
  }}
  onChange={changer}
  getOptionLabel={(option) => option.email}
  fullWidth
  style={{width: 350}}
  renderInput={(params) => <TextField {...params} label="Mitarbeiter" variant="outlined" style={{ backgroundColor: "cyan !important" }}/>}
  required
/>