Mat-Menu не применяет стиль при использовании пользовательской темы

Question

У меня есть пользовательская тема материала, но когда я использую mat-menu, кажется, что она не применяет тему, как видно на изображении ниже:

Код для пользовательской темы выглядит следующим образом:

.light {
  $light-primary: mat-palette($md-primary-blue, 500);
  $light-accent:  mat-palette($md-primary-blue, 900);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

  @include mat-core-theme($light-theme);
  @include mat-checkbox-theme($light-theme);
  @include mat-card-theme($light-theme);
  @include mat-radio-theme($light-theme);
  @include mat-form-field-theme($light-theme); // Form-Field theme
  @include mat-input-theme($light-theme);      // Input Theme
  @include mat-menu-theme($light-theme);

}

А код для отображения мат-меню выглядит следующим образом:

 <button mat-button [matMenuTriggerFor]="menu">Menu</button>

  <mat-menu class="test" #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

Когда я использую встроенные темы, кажется, что работает, но с моей пользовательской темой это не так. Нужно ли добавить еще один элемент в тему?

Спасибо за помощь.

Answer 1

Для тех, у кого есть эта проблема, я упустил следующий код, который я добавил в конструктор AppComponent

@HostBinding('class') componentCssClass;

constructor(public overlayContainer: OverlayContainer){
  this.overlayContainer.getContainerElement().classList.add('light');
  this.componentCssClass = 'light';
}

Который дал следующий результат