Угловой матовый цвет текста не изменяется

Question

Я использую mat-select в моем приложении Angular.Я хотел бы изменить цвет текста, но цвет не меняется.

<mat-select style="color: red" [(ngModel)]="someValue">
  <mat-option>class="empty-select"</mat-option>
  <mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

Я могу без проблем изменить цвет фона, но цвет текста не изменится.

Answer 1

  <mat-select  [(ngModel)]="someValue">
      <mat-option style="color: red" >class="empty-select"</mat-option>
      <mat-option style="color: red" class="not-empty-select" 
         *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
    </mat-select>

Answer 2

Вы можете перезаписать CSS для следующих элементов как -

Панель выбора блока

/deep/ .mat-select-panel {
    background-color: red;
}

Элемент выбора поля выбора

/deep/ .mat-form-field-infix{
     background-color: red;
}

Поле выбора

/deep/ .mat-select{
   background-color: red;
}

не забудьте добавить / глубокий /, как уже упоминалось.

Выберите поле Цвет текста

Используйте этот, если вы хотите изменить цвет текставыберите.

/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: red;
}

Демоверсия здесь - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy

Answer 3

Вам необходимо применить стиль к mat-option вместо mat-select как:

<mat-select [(ngModel)]="someValue">
  <mat-option class="empty-select"></mat-option>
  <mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>

Также вы можете установить цвет в классе not-empty-select.

Обновление 1:

Если вы хотите изменить цвет выбранной опции, добавьте следующий CSS:

.not-empty-select.mat-selected {
  color: green !important;
}

Обновление 2:

Если вы хотитечтобы изменить цвет в поле выбора, измените CSS как:

.not-empty-select.mat-selected {
  color: green !important;
}

:host /deep/ .mat-select-value-text {
  color: green !important;
}