Reactjs 如何以不同的方式设置react select组件的每个选项的样式？

我使用的是react select v2 2.41。 我有3个选项集，我想设置每个选项的背景颜色不同的颜色。这可能吗？如何实现

我尝试过这样的风格：

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

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

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

使用：n子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
}

使用：n子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
}

您可以使用组件道具根据选项道具设置背景色，如下所示：

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>
  );
}

如下所示。

您可以使用组件道具在选项道具上设置背景色，如下所示：

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>
  );
}

---

就像这样。

实现您想要做的事情的另一种方法是使用react select样式

文件：

例如：

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}
/>

---

另一种实现您想要做的事情的方法是使用react select样式

文件：

例如：

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}
/>

---

谢谢，这是非常有用的，只是我用了“选项”而不是“价值容器”，并得到了我需要的东西。就像这样。谢谢，这是非常有用的，只是我用了“选项”而不是“值容器”，并得到了我需要的。就像这样。谢谢，这是我想要的。谢谢，这是我想要的。