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

时间:2019-04-23 22:41:53

标签: angular angular-material

我有一个自定义的材质主题,但是当我使用mat-menu时,似乎没有应用该主题,如下图所示:

enter image description here

自定义主题的代码如下:

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

当我使用内置主题时,它似乎可以工作,但是对于我的自定义主题,则不能。我需要在主题中添加另一个项目吗?

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

对于任何有此问题的人,我所缺少的是我在AppComponent的构造函数中添加的以下代码

@HostBinding('class') componentCssClass;

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

哪个产生了以下结果

enter image description here