我如何在Angular 7的材质菜单的cdk-overlay-pane旁边应用自定义类 [英] 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>

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

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