更改“材质UI自动完成"选项的颜色 [英] Change the color of Material UI Autocomplete option

问题描述

我正在使用Material UI的自动完成，并且我有一个带有颜色属性的列表.我必须使用选项背景中的相应颜色逐个选项进行渲染.

I'm using the Autocomplete of Material UI and I have a list with the attribute Color. I have to render option by option with the respective color in option background.

以下是一个示例:

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
];

推荐答案

您可以使用 renderOption 有条件地渲染MaterialUI最新版本中每个选项的样式.

You can use renderOption to render the style conditionally for each option in the latest version of MaterialUI.

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

现场演示

这篇关于更改“材质UI自动完成"选项的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！