Выбор углового материала: изменить цвет отключенной опции

Question

Используя Angular / Material 6.2, не могу найти правильную настройку CSS, чтобы переопределить цвет выбранной опции мата в пределах отключенного мата-выбора:

<mat-select [disabled]="true" [value]="option2">
  <mat-option>None</mat-option>
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
  <mat-option value="option3">Option 3</mat-option>
</mat-select>

Следующее не делает этого в моем приложенииstyles.css (значение по умолчанию слишком блеклое; мне нужно, чтобы оно больше подчеркивалось в моем приложении):

.mat-select-disabled, .mat-select-content, .mat-disabled, mat-select.mat-disabled {
  opacity: 1.0 !important;
  font-weight: bold !important;
  color: black !important;
}

Поиск обходных путей дает несколько советов, с которыми я не могу работать в этом быстро меняющемся API.Вполне возможно, что я не знаком с css, но нахожу небольшие изменения стиля более сложными, чем ожидалось с Material.

Answer 1

он не будет работать обычными классами, но будет работать с ::ng-deep:

.mat-select {
    ::ng-deep .mat-select-content {
      width: 100%;
    }
    ::ng-deep .mat-select-value {
      color: green /*!important*/;
    }
}
.mat-select-disabled {
    ::ng-deep .mat-select-value {
      color: red /*!important*/;
    }
}

!important - это хак, но если правило css не назначит стили нужному элементу - вы можетепопробуйте проверить, правильно ли вы выбрали !important.

Answer 2

Если вы проверите сгенерированный CSS для элемента mat-select, вы обнаружите, что класс .mat-disabled не стилизует <mat-select> напрямую.Вместо этого его потомки меняют стиль в зависимости от присутствия этого класса;а именно, значение триггера (элемент, к которому применен наиболее визуальный стиль) имеет правило специфичности

.mat-select-disabled .mat-select-value {
    color: rgba(black, 0.38);
}

(примечание: я вижу, что вы используете opacity: 1 в вашем примере правила.Это не заставит текст с color: rgba(x) выглядеть по-другому.)

Просто по своей природе CSS вам нужно будет получить более конкретное значение, чем это правило, чтобы переопределить его.

Поскольку AngularУдивительно, он работает по концепции, называемой инкапсуляцией представлений - стили компонента являются локальными для этого компонента.Это достигается с помощью тега атрибута, где все стили компонентов будут добавлены в селекторы как правило.

Это означает, что если вы просто скопируете это же правило в свой компонент, оно будет более конкретным, чем предыдущийСелекторы и будут применяться.

Если вы пытаетесь применить это глобально, вам нужно будет добавить другой селектор класса и добавить этот класс к элементу.Или те, кто использует темы SASS и Material, могут обернуть это в тему и применить его с простым классом.Директива тоже сработает.

Также, пожалуйста, никогда не используйте !important.Щенок умирает каждый раз, когда вы это делаете.