垫菜单在使用自定义主题时未应用样式

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

}

显示mat菜单的代码如下：

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

哪个产生了以下结果