如何为 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

您可以使用 component 道具根据您的选项 props 设置背景颜色，如下所示：

const Option = props => {
  return (
    <div style={{ backgroundColor: props.data.color }}>
      <components.Option {...props} />
    </div>
  );
};
const options = [
  { label: "Option 1", value: 1, color: "red" },
  { label: "Option 2", value: 2, color: "orange" },
  { label: "Option 3", value: 3, color: "green" }
];

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

喜欢这个live example。

Answer 3

实现您想要做的事情的另一种方法是使用 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

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

How to style each option of react-select component differently?

reactjs

react-select