在Angular 7中，我如何为Material菜单在cdk-overlay-pane旁边应用自定义类？

Question

我有一个需求，想要使用Angular Material菜单创建超级菜单。现在我想使用自定义类应用样式到cdk-overlay-pane中， 为此我尝试使用class和panelClass属性，但对我来说不起作用。

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

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

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

以上代码对我都没有用。

当Angular Material打开菜单CDK Overlay时，应该将自定义类应用于cdk panel类旁边。

- Amit Ghuge

---

代码在哪里？ - Akber Iqbal

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

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

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

Answer 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>

你可以在这里看到一个工作示例。

- Akber Iqbal

---

谢谢，这对我很有用。但是如果我想为CDK覆盖应用自定义类，该怎么办？你有什么想法吗？ - Amit Ghuge

你可以放置你的类，然后通过 CSS 遍历到 pane > panel > content 来为 pane / panel / buttons 设置样式。 - Akber Iqbal

太棒了。我尝试了许多方法来在Bootstrap模态框上显示Angular Material日期选择器。在互联网上搜索了很多，但没有合适的解决方案。你让我的一天变得美好起来了。以下几行代码对我有用：::ng-deep .cdk-overlay-container { z-index: 1200 !important; } - Ashish Kumar Mondal

非常小心地对这些组件进行广泛的样式设计 - 它们可能会产生意想不到的后果，通常是在您不希望受到影响的模块中（例如，工具提示）。 - bsplosion