Question

我正在尝试设置颜色：#aaa当.Select.is-disabled为true，但我无法覆盖.Select-placeholder样式，颜色为：black;

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

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

Answer 1

基本的CSS知识，与react或react-select ..

无关

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

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

CSS读取代码上下，而！important覆盖之前读过的所有内容。现在，你有2！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地狱。

不应该使用

！important。

这是一个快速的最后修复程序，它会导致更多麻烦而不是帮助。

尝试重构你的CSS并摆脱所有重要的陈述。这里不重要，只需要进行一些重构就可以了。

用头脑中的UP to DOWN心态重构你的css，我确定你会自己指出它！

Answer 2

您可以使用react-select的最新版本（2）提供的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}
  />
);

React-select .is-disabled不能改变颜色

2 个答案:

！important。