reactjs - 如何为 react-select 组件的每个选项设置不同的样式？

Question

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

我试过这样的风格：

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

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

标签： reactjsreact-select

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
}