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

Question

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.

Answer 1

@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.

Answer 2

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

Answer 3

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