angular - 如何更改角度材质选项样式？

Question

我使用以下代码：

::ng-deep{
 .mat-select-panel{
   border-radius: 10px;
   border: 1px solid gray;
   position:absolute;
   top: 50px;
 }
}

我希望它看起来像这样：

但是，它仍然是这样的：

从它被选中的地方开起来很丑

标签： angularsassangular-material

Answer 1

我只是在styles.scss中添加panelClass来选择标签和样式

Html:

<mat-form-field>
  <mat-select disableOptionCentering panelClass="dropDown-seasons-panel">
      <mat-option *ngFor="let season of seasons" [value]="season.value">
         {{season.viewValue}}
      </mat-option>
  </mat-select>
 </mat-form-field>

styles.scss:

.dropDown-seasons-panel {
  border-radius: 10px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 50px !important;
}