Material UI 自动完成不同的颜色标签？

Posted 2023-02-22

【中文标题】Material UI 自动完成不同的颜色标签？

【英文标题】：Material UI Autocomplete different colour tags?

【发布时间】：2020-10-19 22:35:46

【问题描述】：

我刚开始学习 material-ui，但在搞清楚一些事情时遇到了一些问题。

我希望在自动完成菜单中包含多个数组（例如 options=top100Films, top100Shows，但当然要使用正确的语法）

我想让标签的颜色根据它从哪个数组中选择而有所不同（而不是像现在一样全是紫色）

如果不可能有多个数组，也许 option.title 和 option.year 会分别显示在列表中，并且如果选择了不同的颜色标签？

如果有人知道如何执行此操作或类似操作，我将非常感谢您的帮助！

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

const CustomAutocomplete = withStyles(
  tag: 
    backgroundColor: "#a0a",
    height: 24,
    position: "relative",
    zIndex: 0,
    "& .MuiChip-label": 
      color: "#fff",
    ,
    "& .MuiChip-deleteIcon": 
      color: "#a0a",
    ,
    "&:after": 
      content: '""',
      right: 10,
      top: 6,
      height: 12,
      width: 12,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1,
    ,
  ,
)(Autocomplete);

export default function Tags() 
  return (
    <div style= width: 500 >
      <CustomAutocomplete
        disableClearable="true"
        filterSelectedOptions="true"
        multiple
        id="tags-standard"
        options=final
        getOptionSelected
        getOptionLabel=(o) => o
        renderTags=(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              className=option.type === "film" ? "tagBlue" : "tagRed"
              variant="outlined"
              label=`$option.title $option.year`
              ...getTagProps( index )
            />
          ))
        
        renderInput=(params) => (
          <TextField
            ...params
            variant="standard"
            placeholder="Favorites"
            margin="normal"
            fullWidth
          />
        )
      />
    </div>
  );


const top100Shows = [
   title: "Once ", year: 19 ,
   title: "Ameri", year: 1998 ,
   title: "ar", year: 2014 ,
   title: "Cas", year: 1942 ,
   title: "C", year: 1931 ,
   title: "P", year: 1960 ,
   title: "Thee", year: 1999 ,
   title: "The", year: 2011 ,
   title: "Mod", year: 1936 ,
   title: "Rai", year: 1981 ,
   title: "Rea", year: 1954 ,
   title: "The", year: 2002 ,
   title: "Tee", year: 2006 ,
   title: "Ci", year: 1988 ,
   title: "Tr", year: 2006 ,
   title: "Gra", year: 1988 ,
];

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
   title: "Once Upon a Time in the West", year: 1968 ,
   title: "American History X", year: 1998 ,
   title: "Interstellar", year: 2014 ,
   title: "Casablanca", year: 1942 ,
   title: "City Lights", year: 1931 ,
   title: "Psycho", year: 1960 ,
   title: "The Green Mile", year: 1999 ,
   title: "The Intouchables", year: 2011 ,
   title: "Modern Times", year: 1936 ,
   title: "Raiders of the Lost Ark", year: 1981 ,
   title: "Rear Window", year: 1954 ,
   title: "The Pianist", year: 2002 ,
   title: "The Departed", year: 2006 ,
   title: "Cinema Paradiso", year: 1988 ,
   title: "The Lives of Others", year: 2006 ,
   title: "Grave of the Fireflies", year: 1988 ,
];

const final = [
  ...top100Films.map((f) => Object.assign(, f,  type: "film" )),
  ...top100Shows.map((s) => Object.assign(, s,  type: "show" )),
];

【参考方案1】：

向AutoComplete 组件提供包含选项的多个数组的唯一方法是合并它们。由于您想根据选项来自哪个单独的数组来呈现不同的标签，因此您必须跟踪每个选项的来源。您可以通过为每个电影和节目对象添加一个type 字段来做到这一点：

[
    ...top100Films.map(f => Object.assign(, f, type: 'film')),
    ...top100Shows.map(s => Object.assign(, f, type: 'show'))
]

然后，将生成的数组传递给 CustomAutocomplete 组件的 options 属性。

material-ui AutoComplete 组件有一个名为 renderTags 的 prop，它接受一个函数，该函数返回呈现的组件代替所选选项的标签。在这里，您可以实现基于选项的type 字段选择颜色的逻辑：

renderTags=(value, getTagProps) =>
    value.map((option, index) => (
        <Chip
            className=option.type === 'film' ? 'tagBlue' : 'tagRed'
            variant="outlined"
            label=`$option.title $option.year
            ...getTagProps( index )
        />
    ))

确保导入Chip 组件并为AutoComplete 组件提供自定义getOptionSelected 函数以比较对象。

您可以在the material-ui docs找到更多信息。