html - 如何自定义cdk覆盖面板？

Question

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

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

在两个组件的 css 文件中，它相互冲突(这是预期的)。 那么有没有办法在两个组件中自定义覆盖 Pane ，以便它不会影响另一个组件的样式。

Answer 1

菜单组件

从 Angular Material v10 开始，我们可以使用 MAT_MENU_DEFAULT_OPTIONS 注入(inject) token 。它有一个选项 - overlayPanelClass: string | string[]，代表:

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

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

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

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

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

选择组件

从 Angular Material v11 开始，我们可以使用 MAT_SELECT_CONFIG 注入(inject) token 。它有一个选项 - 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: 'select-overlay-pane' }
  }
]

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

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