react-select:选择对象的条件样式

Question

我正在从react-select中寻找一个非常具体的行为。我希望能够将自定义样式(backgroundColor:"blue"(应用于组件下拉选项的特定子集。然而，似乎没有简单的方法可以做到这一点，因为我无法访问样式道具中需要的条件。

示例：因此，假设有6个选项。我希望其中三个选项具有基于条件为true的特定样式(不同颜色(，其他选项具有正常样式。

这是一张我想要实现的图片：

下拉，3蓝色3正常

谢谢你的帮助。

let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
{ value:1, label:"Label2", shouldBeBlue:true },
{ value:2, label:"Label3", shouldBeBlue:true }, 
{ value:3, label:"Label4", shouldBeBlue:false },  
{ value:4, label:"Label5", shouldBeBlue:false },
{ value:5, label:"Label6", shouldBeBlue:false },
]
<Select
options={optionsIn}
/>

因此，在这种情况下，Label1、Label2和Label3在react select内部的背景色都应为蓝色，但Label4、Label5和Label6应正常渲染。

Answer 1

找到了答案。您可以使用｛data｝参数访问选项道具：

let optionsIn = [{ value:0, label:"Label1", shouldBeBlue:true },
{ value:1, label:"Label2", shouldBeBlue:true },
{ value:2, label:"Label3", shouldBeBlue:true }, 
{ value:3, label:"Label4", shouldBeBlue:false },  
{ value:4, label:"Label5", shouldBeBlue:false },
{ value:5, label:"Label6", shouldBeBlue:false },
]
<Select
options={optionsIn}
styles={{
option: (styles, { data }) => {
return {
...styles,
backgroundColor: data.shouldBeBlue
? "blue"
: undefined
};
}
}}
/>