css - Angular Material Select : How to customize . 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%; 
}

但是还是不行。

UPDATE

目标:我希望选项面板在打开选择框时向下移动一点，这就是为什么我希望 .mat-select-panel 的上边距为 20%

Answer 1

使用 cdk-overlay-container 作为基础，然后像这样转到选项 Pane ，mat-select 使用绝对位置，其中没有任何子项。所以你需要将你的样式应用到 cdk-overlay-container

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

这是 demo

编辑:

好的，所以你有一个与你可以添加的其他元素的冲突问题

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>

然后像这样改变你的类(class)

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

demo