Angular Материалы - Mat-Select Изменить цвет выбранного значения

Question

Я использую Angular Материал 8.2.3 в своем проекте, и я пытаюсь изменить цвет выбранного значения для компонента Mat-Select (раскрывающееся меню ie), как показано ниже.

В инспекторе chrome я вижу, что цвет шрифта определяется классом .mat-select-value

Однако, когда я пытаюсь изменить цвет с помощью селекторов классов, ничего не происходит.

Есть ли способ изменить цвет выбранного значения? У меня есть другие выпадающие меню на странице, поэтому он должен быть ограничен этим компонентом. Большое спасибо заранее.

Мой код ниже.

HTML

<mat-select class="custom-color"  [(ngModel)]="value">
    <mat-option>
        Yes
    </mat-option>
    <mat-option>
        No
    </mat-option>
</mat-select>

CSS

Попытка 1:

.custom-color.mat-select-value{
    color: green !important;
}

Попытка 2:

.custom-color > .mat-select-value{
    color: green !important;
}

Answer 1

Вы должны добавить класс в select (как вы уже сделали).

После этого вам нужно получить селектор того, насколько глубоко вы хотите go (если внутри div внутри div внутри div ...)

Если установленный вами класс находится в том же компоненте html, что и класс mat-select-value, то все в порядке, .custom-color.mat-select-value.

Однако angular стили материала работают так, что вы не можете легко получить доступ к их классу (если вы не используете ng-deep).

Чтобы стилизовать компонент, вы должны сделать следующее:

Создать mixin в вашем компоненте s css:

@import '~@angular/material/theming';

// Custom mat-select theme
@mixin mat-select-theme() {
  .custom-color.mat-select-value {
     color: green; // You may need to use important here, but it's just in a few cases
  }
}

После этого объявите свой @mixin в вашем основном файле s css (то есть styles.s css)

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import 'pathToFile.scss';
@include mat-select-theme();

Попробуйте.

Руководство по теме материала на случай, если вам нужно:

https://material.angular.io/guide/theming