React-select .is-disabled не может изменить цвет

Question

Я пытаюсь установить цвет: #aaa, когда .Select.is-disabled имеет значение true, но я не могу переопределить стиль .Select-placeholder, который имеет цвет: черный;

.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 читает код вверх-вниз, и! Важный переопределяет все, что было прочитано ранее.теперь у вас есть 2! важный, который заставляет последний переопределить все прежние.

Чтобы это исправить, либо удалите! важный, где цвет черный, либо отредактируйте свой 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 и избавиться от всех! важных утверждений.Важно, что здесь не нужно, просто немного рефакторинга, чтобы все заработало.

Рефакторинг вашей CSS с UP to DOWN мышлением в вашей голове, и я уверен, что вы соберете это самостоятельно!