造型垫-选择棱角材质

Question

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

我使用的是:Angular 4.4.5@Angular/Material:2.0.0-beta.12

Answer 1

对于Angular9+，根据这一点，您可以使用：

.mat-select-panel {
    background: red;
    ....
}

演示

1.使用：：ng-deep：

::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}

2.使用视图封装

...组件CSS样式封装到组件的视图中，不会影响应用程序的其余部分。若要控制如何在每个组件的基础上进行封装，可以在组件元数据中设置视图封装模式。从以下模式中选择：....None表示Angular不进行视图封装。Angular将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中基本相同。

None值是您将需要的，以打破封装和设置材质样式从您的组件。因此可以在组件的选择器上设置：

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

.mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;
}

这一次，您还必须使用！importity来“强制”样式。

style.css

 .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } 

演示

<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>