如何对React-select组件的每个选项进行不同的样式设置？

Question

我正在使用react-select v2（2.41）。 我设置了3个选项，我想将每个选项的背景色设置为不同的颜色。这可能吗？

我尝试了以下样式：

const customStyle = {
    option: (base, state) => ({
        ...base,
        backgroundColor: "red",
    })
};
<Select
    ...
    options={options}
    styles={customStyle}
 />

但是这会将所有选项的颜色更改为相同的颜色。我想要的是每个选项都具有不同的背景色。 像这样：

Answer 1

使用:nth-child() CSS选择器怎么样？

<Select
    ...
    className="myclass"
    classNamePrefix="myclass"
    options={options}
    styles={customStyle}
 />

// CSS
.myclass__value-container:nth-child(1) {
    // rules
}
.myclass__value-container:nth-child(2) {
    // rules
}
.myclass__value-container:nth-child(3) {
    // rules
}

Answer 2

实现目标的另一种方法是使用react select样式

文档：https://react-select.com/styles

示例：

const colorsArray = [
    { label: "Option 1", value: 1, color: '#FF8B8B' },
    { label: "Option 1", value: 2, color: '#ABFF8B' },
    { label: "Option 1", value: 3, color: '#80CEAC' },
];

const colorStyles = {
    option: (styles, { data }) => {
        return {
            ...styles,
            backgroundColor: data.color,
        };
    },
};

<Select
    value={colorsArray[0]}
    options={colorsArray}
    styles={colorStyles}
/>

live exmaple