Q:

React-select .is-disabled cant change color

I'm trying to set color: #aaa when .Select.is-disabled is true, but I cant override the .Select-placeholder style which is color: black;
.Select.is-disabled > .Select-control {
  cursor: not-allowed;
  color: #aaa !important;
}

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

A:

You could use the API that the last version (2) of react-select provides, like this way:
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',
    };
  },
};

Then in the <Select> you use these styles like this:
export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={customStyles}
  />
);

