我如何在 cdk-overlay-pane 旁边为 Angular 7 中的材质菜单应用自定义类

Posted 2023-03-05

【中文标题】我如何在 cdk-overlay-pane 旁边为 Angular 7 中的材质菜单应用自定义类

【英文标题】：how can i apply custom class next to cdk-overlay-pane for material menu in angular 7

【发布时间】：2019-10-05 10:01:45

【问题描述】：

我有一个要求，我想使用角度材料菜单创建大型菜单。现在我想使用自己的自定义类对 cdk-overlay-pane 应用一些样式 为此，我使用了 class 和 panelClass 属性，但对我不起作用。

我尝试在使用 class 和 panelClass 属性时应用自定义类。请检查以下代码

<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass='CustomClass'>

<mat-menu #menu="matMenu" [overlapTrigger]="false" class='CustomClass'>

以上代码都不适合我。

当角材料打开菜单cdk覆盖时，它应该在cdk面板类旁边应用自定义类

【问题讨论】：

代码在哪里？

更新答案以根据您自己的自定义类更改样式

【参考方案1】：

在你的 css 中试试这个......当你打开检查元素时，层次结构非常独特和复杂：

::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content  background: lightblue 
::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item color: blue;

更新：

如果您想使用自己的课程，请参阅使用您的课程的正确面板 相关css：

::ng-deep .customClass .mat-menu-content border:1px solid red; background:lightblue
::ng-deep .customClass .mat-menu-content .mat-menu-item color:blue;

相关HTML：

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class='customClass' >
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

你可以看到working example here

【讨论】：

谢谢它对我有用，但是如果我想为 cdk 覆盖应用自定义类怎么办？？

你可以放置你的类，然后通过 CSS 向下遍历到窗格 > 面板 > 内容以设置窗格/面板/按钮的样式

太棒了。我尝试了很多方法来在引导模式上显示角度材料日期选择器。在互联网上搜索了很多，但没有合适的解决方案。你让我今天一整天都感觉很好。以下几行对我有用 ::ng-deep .cdk-overlay-container z-index: 1200 !important;

在对这些组件进行如此广泛的样式设置时要非常小心 - 它们可能会产生意想不到的后果，通常在您不会预期会受到影响的模块中（例如，tooltips）。