如何自定义cdk覆盖窗格？
我使用垫-菜单和垫-选择在不同的组成部分。我面临的问题是当我们
::ng-deep .cdk-overlay-container .cdk-overlay-pane {
}在两个组件的css文件中，它们相互冲突(这是预期的)。那么，是否有一种方法可以自定义两个组件中的覆盖窗格，使其不影响其他组件的样式。
回答 2
Stack Overflow用户
发布于 2020-05-08 18:10:50
我已经能够改变像.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，我看不出我将如何做到这一点。有一个带有div的cdk-overlay-container，用于所有的覆盖，它是body元素的直接子元素。有CSS中没有父选择器，如果它存在的话，它可以在这里有所帮助。
API中有一个OverlayConfig，但它似乎是用于全局更改覆盖的。
Stack Overflow用户
发布于 2021-11-23 07:12:31
菜单组件
从角材料v10出发，我们可以使用MAT_MENU_DEFAULT_OPTIONS注入令牌。它有一个选项- overlayPanelClass: string | string[]，它表示：
要应用于菜单覆盖面板的类或类列表。
在组件或模块级别使用以下代码：
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#MatMenuDefaultOptions
选择组件
从角材料v11出发，我们可以使用MAT_SELECT_CONFIG注入令牌。它有一个选项- overlayPanelClass: string | string[]，它表示：
要应用于菜单覆盖面板的类或类列表。
在组件或模块级别使用以下代码：
providers: [
{
provide: MAT_SELECT_CONFIG,
useValue: { overlayPanelClass: 'select-overlay-pane' }
}
]Stackblitz示例：https://stackblitz.com/edit/angular-ig6y8v
博士：配置 https://material.angular.io/components/select/api#MatSelectConfig
https://stackoverflow.com/questions/61679508
复制相似问题
腾讯云开发者
