How to add class on mat-menu overlay in Angular 5?

9
votes

I checked mat-menu API (https://material.angular.io/components/menu/api#MatMenu) but I couldn't find how to add a class on mat-menu cdk overlay.

I want to add a class on cdk overlay which contains mat-menu template. Can anyone help on the same?

I want to add class on parent cdk overlay because in responsive menu is not opening correctly. Check this below image.

enter image description here

3
angularangular-material2
You can add a class to your <mat-menu> element - is that not working? What exactly are you trying to do? Can you create a stackblitz example? – G. Tranter
Actually, I want to apply a class on parent cdk overlay because in responsive it is not showing perfectly. – Jimit
I can see the problem, but without code I can't know why it occurs. Plus I don't know what you plan to do to fix it. You can't add a class to a dynamically injected element, but you can override classes globally. Have you tried <mat-menu class="my-class">? Classes set that way are dynamically applied to the .mat-menu-panel div that is the child of the .cdk-overlay-pane div. See 'panelClass' under the MatMenu API docs. – G. Tranter

3 Answers

23
votes

Add backdropClass to the mat-menu, and then add style in the global style file. That cdk-overlay-pane is the one you want to style for, I think. For example:

<mat-menu #subMenu="matMenu" backdropClass="sg-vertical-sub-menu">
</mat-menu>

.sg-vertical-sub-menu+* .cdk-overlay-pane {
    margin-top: 12px;
}
3
votes

I had the same issue, this is what I've done to position the menu below my toolbar.

::ng-deep .cdk-overlay-pane {
  top: 48px!important;
}
3
votes

@Tom Jiang did it works fine, but adding css in styles.css might be a bit inconvenient and difficult to find code.

The better way: If you want to change your component only without affecting other components, you should add a class to the menu.

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

Then style your menu with ::ng-deep.

::ng-deep .customize {
  background: red;
}

voila!! your customization will not affect other components.