Angular with/Angular Material - 对话框主题损坏

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

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

任何关于为什么这不能以正常方式工作的见解将不胜感激，因为我找不到解决此问题的方法。

现场示例站点 https://sendmix-9c2e2.firebaseapp.com/

完整源代码链接 https://github.com/MSU-CSIT-Club/SendMix

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

以下是如何在您的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 https://material.angular.io/guide/theming#multiple-themes

UPDATE:对于动态更改主题：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

constructor(
  private _overlayContainer: OverlayContainer
) { }

changeTheme(theme: 'app-theme-dark' | 'app-theme-light'): void {
  // remove old theme class and add new theme class
  const overlayContainerClasses = this._overlayContainer.getContainerElement().classList;
  const themeClassesToRemove = Array.from(overlayContainerClasses)
    .filter((item: string) => item.includes('app-theme-'));
  if (themeClassesToRemove.length) {
    overlayContainerClasses.remove(...themeClassesToRemove);
  }
  overlayContainerClasses.add(theme);
}