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>

我放了一个class因为我在其他组件中也使用了Select。我尝试添加

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

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

目前我有这个CSS

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

但是还是不行。

UPDATE

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

Answer 1

如果您直接在 styles.css（root）中将样式应用到 class，带有 !important 标签，它将覆盖任何其他样式。但是这样做会破坏封装。
如果您使用 /deep/ 在组件中应用样式，样式将被覆盖，mat-form-field /deep/ (class-name) {}（已弃用的问题）请阅读 https://blog.angular-university.io/angular-host-context/ 以获得深入的解释
由于 Deprecating 问题，您实际上可以尝试 add/remove classes 使用 vanilla javascript，但是直接操作 dom 是不好的练习。

总结：使用Deprecated语法是不好的，在根级别应用样式会导致封装问题，直接操作dom是一种不好的做法，所以你可以使用angular提供的工具来操作dom 解决上述问题，请参阅下文 link 了解在 angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02
[=20 中操纵 dom 的最佳实践=]

Answer 2

使用 cdk-overlay-container 作为基础，然后像这样转到选项窗格，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

Answer 3

要在打开 select 框时向下移动选项面板位，请使用下面的 'disableOptionCentering' 属性，这对我有用。

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

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

Angular Material Select: How to customize .mat-select-panel itself

css

material-design

angular-material

angular-material2

angular