Question

如何将不同的样式应用于同一页面中的多个角度材料组件：一个选择/选项具有蓝色背景，另一个具有红色背景？

可在https://stackblitz.com/edit/material-different-styles上找到示例但这不起作用！

Answer 1

由于mat-select-panel将被附加到叠加层，因此您无法为父元素mat-form-field赋予类。

相反，您可以将类附加到mat-option。

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

角材料-应用不同的样式

3 个答案: