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

Question

我想在 react-select 中设置禁用选项的文本（斜体等）的样式。虽然这对我来说似乎很基本，但我找不到任何相关信息。

是否有自己的 'style key' 禁用选项？

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

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

Styling the disabled option in react-select

reactjs

react-select