Angular w / Angular Material - 对话主题被打破

Question

您好我在对话框组件中遇到Angular Material主题的问题，其中文本和其他组件的颜色不按照应有的方式工作。

在app.component中，我有一个设置图标按钮，用于打开一个对话框main.settings.dialog但是当它打开时，如下图所示，着色不适合黑暗主题。

任何有关为什么这种方式不能正常工作的见解都会非常感激，因为我无法找到解决这个问题的方法。

Live example site

Link to full source code

Answer 1

由于您的主题位于样式类中，因此需要将其添加到全局覆盖容器中。

以下是AppModule：

中的方法

import {OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
      // ...
})
export class AppModule {
      constructor(overlayContainer: OverlayContainer) {
          overlayContainer.getContainerElement().classList.add('app-dark-theme');
      }
}

官方文档链接：https://material.angular.io/guide/theming#multiple-themes

Answer 2

问题出在您的material2-app-theme.scss主题文件中：

.app-dark-theme {
  @include angular-material-theme($dark-theme);
}

这在Sass中被称为mixin。以这种方式编写时，主题仅适用于具有类.app-dark-theme的元素。

删除课程并离开：

@include mat-core();

$primary: mat-palette($mat-brown, 400);
$accent:  mat-palette($mat-yellow, 100);
$warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($primary, $accent, $warn);


@include angular-material-theme($dark-theme);

将主题应用于整个应用。从它的外观来看，这意味着你可以拿出目前在那里的大量css。

另请注意：对话框容器中的第一行不包含父div以外的任何标记，因此没有应用任何字体样式。材料提供了几个便利指令来帮助对话框样式，例如， <h2 mat-dialog-title>Dialog Title!</h2>