我的主题都完美运行,但出于某种原因,我的垫子菜单只会根据调用的任何默认值设置主题,否则不会。
所以为了不破坏它的主题,我必须打电话
@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 的开头没有调用深色主题:
最佳答案
在 2.0.0-beta.11
的重大变更中:
overlay: Now that the Overlay is part of the cdk rather than Angular Material directly, the themeClass property has been removed. To add a class to the overlay for theming, you can do
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();
}
关于css - 垫子菜单主题颜色不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46869714/