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

Question

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

禁用选项是否有自己的'样式键'？

Answer 1

您可以使用react-select的styles API

这里是一个例子：

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