CODEWITHSUNDEEP
cssreactjsreact-select
André Kværne Nøsterud
André Kværne Nøsterud

Reputation: 51

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

Upvotes: 3

Views: 14419

Answers (2)

pmiranda
pmiranda

Reputation: 8470

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

Upvotes: 15

larv
larv

Reputation: 938

Basic CSS knowledge, has nothing to do with react or react-select..

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

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

CSS reads code up-down, and !important overrides everything that has been read before. now, you have 2 !important, which makes the last one override all former.

To fix this, either remove the !important where color is black, or edit your css like this:

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

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

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

But you might see now that you've created a !important hell.

!important should not be used.

It is a quick last resort fix, that causes more trouble than it helps.

try to refactor your css and get rid of all !important statements. important isnt necessary here, just a bit of refactoring to get it work.

Refactor your css with the UP to DOWN mindset in your head and I'm sure you are gonna nail it by yourself!

Upvotes: 0

Related Questions