Css 反应选择。已禁用，无法更改颜色

当.Select.is-disabled为true时，我试图设置颜色：aaa，但我无法覆盖.Select占位符样式，该样式为颜色：黑色

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

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

---

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

CSS从上到下读取代码，并且！“重要”将覆盖以前阅读过的所有内容。现在，你有2个！重要信息，这使得最后一个覆盖所有前一个

若要解决此问题，请移除！重要信息：颜色为黑色，或按如下方式编辑css：

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

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

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

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

但是现在你可能会看到你已经创建了一个！重要的地狱

!不应使用重要信息。 这是一个快速的最后解决办法，造成的麻烦比它的帮助更多

试着重构你的css，摆脱所有的错误！重要声明。重要的是在这里不是必要的，只是一点重构，使其工作

---

用你头脑中自上而下的心态重构你的css，我相信你会自己解决它的

您可以使用最新版本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.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

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

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

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

---

您需要添加一个包含所有css的问题工作示例。使用codepen或JSFIDLE。请发布HTML以及select元素的所有相关CSS。您几乎可以编辑资源主less文件中的每种颜色。有很多变量需要自定义。如果“选择”被禁用，是否要更改占位符颜色；如果存在，是否要更改值？