如何自定义 cdk 覆盖窗格？

Question

我在不同的组件中使用 mat-menu 和 mat-select。 我面临的问题是，当我们设置

::ng-deep .cdk-overlay-container .cdk-overlay-pane {
}

在组件的 css 文件中，它相互冲突（这是预期的）。 那么有没有办法在两个组件中自定义覆盖窗格，这样它就不会影响另一个组件的样式。

Answer 1

我已经能够改变像.mat-menu-content这样的覆盖的后代的东西，但不能覆盖自身。

根据您尝试设计的样式，您可以这样做：

app.component.scss

::ng-deep .mat-menu-panel {
  background-color: unset;
}

::ng-deep .overlay-style-one .mat-menu-content {
  background-color: aquamarine;
}

::ng-deep .overlay-style-two .mat-menu-content {
  background-color: coral;
}

app.component.html

<ng-container>
  <button mat-button [matMenuTriggerFor]="menu1">Menu 1</button>
  <mat-menu #menu1="matMenu" class="overlay-style-one">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</ng-container>

<ng-container>
  <button mat-button [matMenuTriggerFor]="menu2">Menu 2</button>
  <mat-menu #menu2="matMenu" class="overlay-style-two">
    <button mat-menu-item>Item 3</button>
    <button mat-menu-item>Item 4</button>
  </mat-menu>
</ng-container>

如果您想更改.cdk-overlay-pane本身的 CSS，我不知道该怎么做。 有一个带有cdk-overlay-container的div可用于所有叠加层，它是body元素的直接子元素。 CSS 中没有父选择器，如果存在的话，这里可能会有所帮助。

API 中有一个OverlayConfig ，但它似乎用于全局更改覆盖。

Answer 2

菜单组件

从 Angular Material v10开始，我们可以使用MAT_MENU_DEFAULT_OPTIONS注入令牌。 它有一个选项 - overlayPanelClass: string | string[] overlayPanelClass: string | string[] ，表示：

class 或要应用于菜单覆盖面板的类列表。

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

providers: [
  {
    provide: MAT_MENU_DEFAULT_OPTIONS,
    useValue: { overlayPanelClass: 'menu-overlay-pane' }
  }
]

Stackblitz 示例： https://stackblitz.com/edit/angular-zmjhh6

Docs: https://material.angular.io/components/menu/api#MAT_MENU_DEFAULT_OPTIONS https://material.angular.io/components/menu/api#MatMenuDefaultOptions

Select 组件

从 Angular Material v11开始，我们可以使用MAT_SELECT_CONFIG注入令牌。 它有一个选项 - overlayPanelClass: string | string[] overlayPanelClass: string | string[] ，表示：

class 或要应用于菜单覆盖面板的类列表。

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

providers: [
  {
    provide: MAT_SELECT_CONFIG,
    useValue: { overlayPanelClass: 'select-overlay-pane' }
  }
]

Stackblitz 示例： https://stackblitz.com/edit/angular-ig6y8v

Docs: https://material.angular.io/components/select/api#MAT_SELECT_CONFIG https://material.angular.io/components/select/api#MatSelectConfig