在react-select中设置禁用选项的样式

时间:2020-05-11 14:42:04

标签: reactjs react-select

我想在react-select内设置禁用选项的文本(斜体等)的样式。尽管这对我来说似乎很基础,但是我找不到任何东西。

禁用选项是否有自己的“样式键”?

1 个答案:

答案 0 :(得分:1)

您可以使用react-select的{​​{3}}

这里是一个例子:

const customStyles = {
  // For the select itself (not the options)
  control: (styles, { isDisabled }) => {
    return {
      ...styles,
      color: isDisabled ? 'red' : 'white'
      fontStyle: isDisabled ? "italic" : "normal";
    }
  },
  // For the options
  option: (styles, { isDisabled }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : 'blue',
      color: 'green',
    };
  },
};

然后像这样使用它:

 <Select
    {...props}
    styles={customStyles}
  />