Adding panelClass to mat-menu does nothing

Bug:

Adding panelClass to mat-menu does nothing. The problem is that material menu gets rendered using cdk-overlay-pane, which is outside of the component and imposible to style without using ::ng-deep, which interferes with other components using overlay panel.

What is the expected behavior?

Accoring to documentation:

@Input('class')
panelClass: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.

Example of non-working code:

<div class="container" [matMenuTriggerFor]="avatarMenu" matTooltip="{{account?.tenantCode}}">
  <span [ngClass]="serverIsReachable ? 'avatar' : 'offline'"></span>
  <div class="account" *ngIf="serverIsReachable">
      <span class="name">{{account?.firstName + ' ' + account?.lastName}}</span>
      <span class="email">{{account?.email}}</span>
  </div>
  <div class="account" *ngIf="!serverIsReachable">
    <span>{{'server-is-unreachable' | translate}}</span>
  </div>
</div>
<mat-menu #avatarMenu="matMenu" yPosition="below" panelClass="custom" [overlapTrigger]="false">
  <div class="settings">
    <label>{{'language'|translate}}</label>
    <div class="languages">
      <span [ngClass]="{ 'sel': trans.currentLang === 'sr' }" (click)="setLang('sr')">SRP</span>
      <span [ngClass]="{ 'sel': trans.currentLang === 'en' }" (click)="setLang('en')">ENG</span>
     </div>
  </div>
  <button mat-menu-item class="logout" (click)="logout()">
    <mat-icon>power_settings_new</mat-icon>
    <span>{{'logout'|translate}}</span>
  </button>
</mat-menu>

What is the current behavior?

Inspecting HTML tree, no classes were applied to any element, even though panelClass property was set on mat-menu component.

What are the steps to reproduce?

Check the info given above

What is the use-case or motivation for changing an existing behavior?

I want to set position and width of overlay element rendering menu contents.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Linux Mint 18.3 Angular 5.2.8 Angular Material 5.2.3 Typescript 2.7.1

Is there anything else we should know?

I know that people reported similar issue earlier, but there wasn’t any viable explanation or solution given to it.

[tameshnirmalkar]

try to use with

::ng-deep .custom {
 //whatever your rules
}

[tryptophane]

using the “class” input does the job, but this is still a bug, or at least the API documentation is misleading. This bug should not have been closed imho.