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中进行自定义，但问题是，包含另一个选择框的其他组件也会受到影响（继承了页边距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作为基础，并转到这样的选项窗格，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>

并像这样更改您的班级

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

demo

Answer 2

如果使用！important标签将样式直接应用于styles.css（根目录）中的类，它将覆盖其他样式。但是这样做会破坏封装。
如果您使用/ deep /在组件中应用样式，则样式将被覆盖，mat-form-field / deep /（类名）{}（已弃用的问题）请阅读https://blog.angular-university.io/angular-host-context/以获得详细说明
由于存在过时问题，您实际上可以尝试使用普通javascript添加/删除类，但直接操作dom是一种不好的做法。

摘要：使用不赞成使用的语法是不好的，在根级别上应用样式会导致封装问题，直接操作dom是一种不好的做法，因此您可以使用angular提供的工具来操纵dom来解决上述问题，请参考以下内容链接，以了解最佳操作方式，以按角度https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

Answer 3

要在打开选择框时向下移动选项面板，请使用如下所示的'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本身

3 个答案: