how can i apply custom class next to cdk-overlay-pane for material menu in angular 7

Question

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.

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

none of above code is working for me.

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

Solution

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;}

Update:

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;}

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

you can see a working example here