【发布时间】：2020-10-20 20:20:21
【问题描述】：
现在我的自动完成菜单中包含两个数组，它们的芯片/标签的颜色是主要的还是次要的，具体取决于所选组件是哪个数组的元素。
我想在菜单中包含所有四个数组（top10Songs、top10Artists、top10Films、top10Shows）。
我的问题是：
- 我怎么能有四种独特的颜色而不是两种（主要和次要）
- 如何自定义这些颜色
我是 Material UI 的新手，非常感谢您的帮助！
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { makeStyles } from "@material-ui/core/styles";
import { Chip } from "@material-ui/core";
const useStyles = makeStyles({
textField: {
"& input::placeholder": {
color: "#a2a1a1",
fontStyle: "italic",
},
},
});
export default function Tags() {
const [selectedOptions, setSelectedOptions] = React.useState([]);
const classes = useStyles();
return (
<div style={{ width: 500 }}>
<Autocomplete
disableClearable="true"
filterSelectedOptions="true"
multiple
id="tags-standard"
options={final}
value={selectedOptions}
onChange={(event, newValue) => {
setSelectedOptions(newValue);
}}
getOptionSelected={(o, v) => o.title === v.title && o.year === v.year}
getOptionLabel={(o) => o.title + " " + o.year}
renderTags={(value, getTagProps) => []}
renderInput={(params) => (
<TextField
{...params}
className={classes.textField}
variant="standard"
placeholder="Favorites"
margin="normal"
//color="blue"
fullWidth
/>
)}
/>
<div>
{selectedOptions.map((option, index) => (
<Chip
key={index}
color={option.type === "film" ? "primary" : "secondary"}
label={`${option.title} ${option.year}`}
onDelete={() =>
setSelectedOptions([
...selectedOptions.slice(0, index),
...selectedOptions.slice(index + 1),
])
}
/>
))}
</div>
</div>
);
}
const top10Songs = [
{ title: "A", year: 1 },
{ title: "B", year: 2 },
{ title: "C", year: 3 },
{ title: "D", year: 4 },
{ title: "E", year: 5 },
{ title: "F", year: 6 },
{ title: "G", year: 7 },
{ title: "H", year: 8 },
{ title: "I", year: 9 },
{ title: "J", year: 10 },
{ title: "K", year: 11 },
{ title: "L", year: 12 },
{ title: "M", year: 13 },
{ title: "N", year: 14 },
{ title: "O", year: 15 },
{ title: "P", year: 16 },
];
const top10Artists = [
{ title: "Aa", year: 1 },
{ title: "Bb", year: 2 },
{ title: "Cc", year: 3 },
{ title: "Dd", year: 4 },
{ title: "Ee", year: 5 },
{ title: "Ff", year: 6 },
{ title: "Gg", year: 7 },
{ title: "Hh", year: 8 },
{ title: "Ii", year: 9 },
{ title: "Jj", year: 10 },
{ title: "Kk", year: 11 },
{ title: "Ll", year: 12 },
{ title: "Mm", year: 13 },
{ title: "Nn", year: 14 },
{ title: "Oo", year: 15 },
{ title: "Pp", year: 16 },
];
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top10Shows = [
{ 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 },
];
const top10Films = [
{ 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 },
];
const final = [
...top10Films.map((f) => Object.assign({}, f, { type: "film" })),
...top10Shows.map((s) => Object.assign({}, s, { type: "show" })),
];【问题讨论】：
标签： javascript reactjs autocomplete material-ui react-material