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

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

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