我如何在 cdk-overlay-pane 旁边为 angular 7 的材质菜单应用自定义类 [英] how can i apply custom class next to cdk-overlay-pane for material menu in angular 7

问题描述

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

i have requirement where i want to create mega menu using angular material menu. now i want apply some style to cdk-overlay-pane using own custom class for that i used class and panelClass attribute but doesn't work for me.

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

i tried to apply custom class on using class and panelClass attribute. please check below code

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

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

以上代码都不适合我.

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

it should be apply custom class next to cdk panel class when angular material open menu cdk overlay

推荐答案

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

Try this in your css... the hierarchy is quite unique and complex when you open up the inspect element:

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

if you'd like to use your own class, then refer to the correct panel using your class relevant 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>

您可以在此处查看 工作示例

这篇关于我如何在 cdk-overlay-pane 旁边为 angular 7 的材质菜单应用自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！