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

}

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

其中产生了以下结果