我如何在角度7的材料菜单的cdk-over-pane旁边应用自定义类

Question

我有要使用角形材质菜单创建大型菜单的要求。现在我想使用自己的自定义类将某种样式应用于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面板类旁边应用自定义类

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>

您会看到一个working example here