REACT-SELECT如果选择了某个选项(或仅选择文本本身)，则为单元格的背景上色

Question

如果进行了选择，我想填充下拉框单元格的背景。例如Taste:Good和Comments:3/4，它们必须是match.json中的defout值。如果是Good，则单元格的背景应为绿色。3/4细胞应为黄色。(cf image(

对于可用性，如果可用性为1，则它将是唯一已显示为蓝色的复选框，否则不填写蓝色。

import React from "react";
import Select from "react-select";

显示器：

export default function Display() {
...
const styles = {
select: {
width: "100%",
maxWidth: 150
}
};
const TASTE = [
{ label: "Good", value: "Good" },
{ label: "Medium", value: "Medium" },
{ label: "Bad", value: "Bad" }
];
...   
return (
<>
<div className="TextStyle">
{"Taste "}
<CustomDropdown
style={styles.select}
options={TASTE}
defaultValue={TASTE.find((t) => t.label === 
item.taste)}
/>
</div>
...
</>
);
}

Answer 1

在Select组件中，您可以使用名为styles的道具，在那里您可以根据所做的选择创建一个显示不同颜色的逻辑。例如：如果你只想在选择Good时背景颜色为绿色，那么你可以创建一个这样的对象：

const colourStyles = {
singleValue: (provided, { data }) => ({
...provided,
backgroundColor: data.value === "Good" ? "green" : "",
}),
};

然后将对象colorStyles作为道具传递给CustomDropDown：

<CustomDropdown
style={styles.select}
options={TASTE}
defaultValue={TASTE.find(t => t.label === item.taste)}
styleSelect={colourStyles}
/>

最后，在CustomDropdown组件内部，将styleSelect传递给Select组件，如下所示(记得在CustomDropdown组件内部添加我创建的新道具作为参数(：

<Select 
options={options} 
defaultValue={defaultValue}
styles={styleSelect}
/>

然后，您可以对其他CustomDropDown组件执行相同操作。