更改 MUI 自动完成选项的颜色

Question

我正在使用 Material UI 的Autocomplete功能，并且有一个属性为 Color 的列表。 我必须在选项背景中使用相应的颜色逐个渲染选项。

这是一个例子：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => {
        return (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        );
      }}
    />
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994, color: '#FF0000' },
  { title: "The Godfather", year: 1972, color: '#FF5555' },
  { title: "Avatar", year: 2010, color: '#FFFFFF' },
  // Plus a bunch more
];

Answer 1

您可以使用renderOption为最新版本的 MaterialUI 中的每个选项renderOption地呈现样式。

<Autocomplete
  renderOption={(props, option) => {
    const { title, color } = option;
    return (
      <span {...props} style={{ backgroundColor: color }}>
        {title}
      </span>
    );
  }}
  {...}
/>

现场演示

Answer 2

您可以像这样更改 CSS：

.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] {
    background: #ffff
}

Answer 3

这会帮助你！ 更改选项颜色

<Autocomplete
 limitTags={1}
 disablePortal
 id="simple-search"
 value={select.region}
 onChange={handleChange("region")}
 options={region}
 sx={{
   width: { sm: "100%", md: 340 },
   "& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
        backgroundColor: "#363636",
    },
   "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
      {
        backgroundColor: "#4396e6",
      },
   "& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true'] 
   .Mui-focused":
   {
      backgroundColor: "#3878b4",
   },
  }}
            disableCloseOnSelect
            multiple
            renderInput={(params) => (
              <TextField {...params} label="Region" color="info" />
            )}
          />