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

Question

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

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

任何关于为什么这不能以正常方式工作的见解将非常感激,因为我无法找到解决这个问题的方法.

实例网站

链接到完整的源代码

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