Угловой материал - применять разные стили

Question

Как применить разные стили к нескольким угловым компонентам материала на одной странице: выбор / опция с синим фоном и еще один с красным фоном?

Пример доступен на https://stackblitz.com/edit/material-different-styles Но это такне работает!

Answer 1

Поскольку mat-select-panel будет прикреплен к наложенному слою, вы не можете назначать классы родительскому элементу mat-form-field.

Вместо этого вы можете прикрепить класс к mat-option. * 1006. *

app.component.scss

.blue {
    background-color: blue;
  }
.red {
    background-color: red;
}

app.component.html

<mat-form-field>
  <mat-select placeholder="Blue backgroud">
    <mat-option class="blue" *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-select placeholder="Red backgroud">
    <mat-option class="red" *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 2

Вы можете использовать Стиль для параметра выбора мата, чтобы установить цвет фона для любого цвета по вашему выбору.

<mat-option style="background-color: red;" *ngFor="let food of foods" [value]="food.value">

В случае, если вы хотите изменить выбранный цвет фона на любой цвет, который вы можетеиспользуйте

<mat-select placeholder="Red backgroud" style="background-color: red;">

Надеюсь, это поможет

Answer 3

Вы можете изменить mat-option цвет фона, как показано ниже.

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

Вы можете изменить mat-select цвет фона, как показано ниже.

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

StackBlitz