如何用CSS修改Material-UI Autocomplete TextField的背景、字体及边框颜色

完整实现代码 #

JSX部分 #

<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={clients}
  className="test"
  renderInput={(params) => <TextField {...params} label="Movie" variant="outlined" />}
/>

CSS部分 #

/* 基于自定义类名嵌套修改样式（需支持CSS预处理器嵌套语法，如Sass/Less） */
.test {
  /* 调整TextField输入框样式 */
  .MuiOutlinedInput-root {
    /* 输入框背景色 */
    background-color: #f5f5f5;

    /* 输入框内字体颜色 */
    .MuiInputBase-input {
      color: #333;
    }

    /* 默认状态边框颜色 */
    .MuiOutlinedInput-notchedOutline {
      border-color: #ccc;
    }

    /* hover状态边框颜色 */
    &:hover .MuiOutlinedInput-notchedOutline {
      border-color: #666;
    }

    /* 聚焦状态边框颜色 */
    &.Mui-focused .MuiOutlinedInput-notchedOutline {
      border-color: #1976d2;
    }
  }

  /* 调整下拉列表(Listbox)样式 */
  .MuiAutocomplete-listbox {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
  }

  /* 调整下拉列表选项交互样式 */
  .MuiAutocomplete-option {
    &:hover {
      background-color: #e3f2fd;
    }
    &.Mui-selected {
      background-color: #bbdefb;
      color: #1976d2;
    }
  }
}

如果使用纯CSS（不支持嵌套），需要将选择器展开为平级结构：

.test .MuiOutlinedInput-root {
  background-color: #f5f5f5;
}
.test .MuiOutlinedInput-root .MuiInputBase-input {
  color: #333;
}
.test .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #ccc;
}
.test .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #666;
}
.test .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #1976d2;
}

.test .MuiAutocomplete-listbox {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
}

.test .MuiAutocomplete-option:hover {
  background-color: #e3f2fd;
}
.test .MuiAutocomplete-option.Mui-selected {
  background-color: #bbdefb;
  color: #1976d2;
}

关键样式说明 #

• TextField输入框：通过.MuiOutlinedInput-root控制容器样式，针对输入内容、边框的不同状态（默认/hover/聚焦）分别设置样式；若使用filled/standard变体，需替换为.MuiFilledInput-root/.MuiInput-root。
• 下拉列表：复用你已用到的.MuiAutocomplete-listbox类，补充背景、边框等样式；通过.MuiAutocomplete-option定义选项的hover和选中状态。

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