垫菜单主题颜色不变

Question

我的主题都完美无缺，但出于某种原因，我的mat菜单只会在调用默认值时获得主题，否则不会。 因此，我不得不打电话给它的主题 @include angular-material-theme($dark-theme);

在我的styles.scss的顶部，然后有我设置的自定义类，默认情况下加载我的灯光，如下所示：

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

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, AfterViewInit {
    title:string = "Callum.Tech";

    themeClass: string = "light-theme";

    overlay;

    constructor(
        private overlayContainer: OverlayContainer
    ) {
        this.overlay = overlayContainer;
    }

    setDarkTheme(): void {
        this.themeClass = "dark-theme";
    }

    setLightTheme(): void {
        this.themeClass = "light-theme";
    }

    ngOnInit() {
        this.overlay.themeClass = this.themeClass;
    }
}

其他所有内容都会重新主题并且工作正常而不会调用开头包括我提到的但是mat-menu会抛出一个合适的东西，只使用它在网站启动时提供的第一个主题，并且不会随着主题的其余部分而改变。

以下是在styles.scss开头调用的黑暗主题以及正常加载的灯光主题

这是选择的黑暗主题，但在styles.scss的开头没有调用黑暗主题：

Answer 1

2.0.0-beta.11的重大变化：

  

overlay：既然Overlay是cdk的一部分而不是Angular Material的一部分，那么themeClass属性已被删除。要为叠加添加类以进行主题化，您可以这样做     

overlayContainer.getContainerElement().classList.add('my-theme-class');

因此，您可以按如下方式更改代码：

constructor(
    private overlayContainer: OverlayContainer
) {
    this.overlay = overlayContainer.getContainerElement();
}

toggleTheme(): void {
    if (this.overlay.classList.contains("dark-theme") {
        this.overlay.classList.remove("dark-theme");
        this.overlay.classList.add("light-theme");
    } else if (this.overlay.classList.contains("light-theme") {
        this.overlay.classList.remove("light-theme");
        this.overlay.classList.add("dark-theme");
    } else {
        this.overlay.classList.add("light-theme");
    }
}
ngOnInit() {
    this.toggleTheme();
}