Angular Material Select：如何自定义.mat-select-panel本身

Question

我有使用Angular Material Select的html结构

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

我放置了一个类，因为我还在其他组件中使用了Select。我尝试添加

::ng-deep .mat-select-panel {
    margin-top: 20%; 
} 

在CSS中进行自定义，但是问题是，包含另一个选择框的其他组件也会受到影响（继承了margin-top CSS）

目前我有这个CSS

.year-drpdwn-vacay-stock mat-select.mat-select :host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

但这仍然行不通。

更新

目标：打开选择框后，我希望选项面板向下移动一点，这就是为什么我希望.mat-select-panel最高利润为20％

Answer 1

使用cdk-overlay-container基于并转到选项窗格这样，垫选择使用绝对位置没有任何孩子。因此您需要将您的样式应用于cdk-overlay-container

.cdk-overlay-container .cdk-overlay-pane{
   margin-top: 7%;
}

这是演示

编辑：

好的，所以您与其他元素存在冲突问题，可以添加

panelClass="testClass"

和

<mat-select placeholder="Favorite food" panelClass="testClass">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

像这样改变你的班级

.cdk-overlay-container .cdk-overlay-pane .testClass{
margin-top: 7%;
}

演示