如何使用“.cdk-overlay-pane”自定义或应用另一个 class for angular material mat-select |垫对话框

Question

我正在使用 mat-select 来显示选项列表。因此，当您单击 mat-select 输入字段时，它会显示使用 div 和 cdk-overlay-pane class 的选项列表。我想自定义 cdk-overlay-pane class。使用 ::ng-deep 我这样做了，

  ::ng-deep {
    .cdk-overlay-pane {
      transform: translateX(-40px) translateY(-13px) !important;
    }
  }

& 它也可以工作，但它正在影响另一个 cdk-overlay-pane。

有什么方法可以使用 cdk-overlay-pane 为 div 提供 customClass 吗？

<div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX(-40px) translateY(-51px);">

这样只有这个 div 会被自定义并且不会影响其他 div。

Answer 1

您应该使用 MAT_SELECT_CONFIG 注入令牌。它有一个选项overlayPanelClass: string | string[]，代表：

the class or list of classes to be applied to the menu's overlay panel.

很快，在组件或模块级别使用以下代码：

providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'customClass' }
    }
  ],

overlayPanelClass 选项可从 Angular Material v11.

MAT_SELECT_CONFIG 记录在案 here。 MatSelectConfig 已记录 here:

How to customize or apply another class with ".cdk-overlay-pane" for angular material mat-select | mat-dialog