React-select 的 .is-disabled 无法更改颜色。

Question

当.Select.is-disabled为true时，我想将颜色设置为#aaa，但我无法覆盖颜色为黑色的.Select-placeholder样式。

.Select.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

.Select-placeholder {
  color: black !important;
}

- André Kværne Nøsterud

---

您需要添加一个包含所有CSS的工作示例，使用CodePen或JSFiddle。 - Marko Letic

请发布选择元素的所有相关CSS以及HTML。 - AndrewL64

你几乎可以在资源的主要less文件中编辑每种颜色。有很多变量可以自定义。 - Felix Gaebler

如果选择已禁用，您想要更改占位符颜色，或者如果存在，则更改值吗？ - Ihor Lavs

Answer 1

您可以使用最新版本（2）的 react-select 提供的API，像这样：

const customStyles = {
  // For the select it self, not the options of the select
  control: (styles, { isDisabled}) => {
    return {
      ...styles,
      cursor: isDisabled ? 'not-allowed' : 'default',
      // This is an example: backgroundColor: isDisabled ? 'rgba(206, 217, 224, 0.5)' : 'white'
      color: isDisabled ? '#aaa' : 'white'
    }
  },
  // For the options
  option: (styles, { isDisabled}) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : blue,
      color: '#FFF',
      cursor: isDisabled ? 'not-allowed' : 'default',
    };
  },
};

然后在 <Select> 标签中像这样使用这些 styles：

export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={customStyles}
  />
);

- pmiranda

Answer 2

基本的CSS知识，与react或react-select无关。

.Select.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

.Select-placeholder {
  color: black !important;
}

CSS 从上到下读取代码，!important 可以覆盖之前读取的所有内容。现在你有两个 !important，这使得最后一个覆盖了之前的所有内容。

要解决这个问题，可以删除颜色为黑色的 !important，或者像这样编辑你的 CSS：

.Select.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

.Select-placeholder {
  color: black !important;
}

.Select.is-disabled {
  color: #aaa !important;
}

不应使用!important。

它是一种快速的最后手段修复方法，会带来更多麻烦而不是帮助。

尝试重构你的CSS并摆脱所有!important语句。这里不需要important，只需要进行一些重构就可以让它正常工作。

以“自上而下”的思维方式重构你的CSS，我相信你能够自己解决问题！

但你可能现在已经创造了一个!important地狱。

- Lucas Reppe Welander