角材料5暗色主题不适用于身体
dan*_*man 3 angular-material angular angular-cdk
我创建了一个“自定义”主题，（使用位于https://material.angular.io/guide/theming的主题文档，这很糟糕），如下所示：
@import '~@angular/material/theming';
@include mat-core();
$ip-primary: mat-palette($mat-indigo);
$ip-accent: mat-palette($mat-pink, A200, A100, A400);
$ip-theme: mat-light-theme($ip-primary, $ip-accent);
$ip-theme-dark: mat-dark-theme($ip-primary, $ip-accent);
.indigo-pink {
@include angular-material-theme($ip-theme);
}
.indigo-pink-dark {
@include angular-material-theme($ip-theme-dark);
}
我的index.html包含以下内容：
<body class="mat-app-background mat-typography">
<app-root></app-root>
</body>
在app-root组件的容器中，我使用以下方法在自定义类名（indigo-pink和indigo-pink-dark）之间切换：
<div [ngClass]="appTheme">
我还使用以下方法将CDK覆盖容器类设置为我的自定义类名称：
setContainerClass(className: string): void {
const containerClassToKeep = 'cdk-overlay-container';
const overlayClassList = this.overlayContainer.getContainerElement().classList;
const existingClasses = Array.from(overlayClassList);
existingClasses.forEach(classToken => {
if (classToken !== containerClassToKeep) {
overlayClassList.remove(classToken);
}
});
overlayClassList.add(className);
}
主要问题是，当我切换到深色主题时，确实看到indigo-pink-dark类名已正确添加到我的应用程序组件容器中，但是只有一些样式发生了变化（例如，顶部的工具栏变暗，而Material组件）-主体页面保持白色。主题指南（和其他博客文章）说，使用mat-app-background应该可以解决此确切问题。
另外，如果我尝试使用例如手动更新主体的背景颜色
.indigo-pink-dark {
@include angular-material-theme($ip-theme-dark);
body & {
background-color: #000;
}
}
然后，此“背景色”仅覆盖整个页面，而您看不到页面上的任何元素。这是值得做的CDK覆盖，因为如果我删除，增加了类名来覆盖的部分，它种作品-页面的背景也得到正确设置，但随后重载不会得到正确的造型。
我遇到了同样的问题，并在Angular Material GitHub第3298号上找到了该解决方案（由JamieStill发布）。
我将所有app.component.html内容包装在div中
<div class="mat-typography app-frame mat-app-background">
<app-header></app-header>
<main>
<app-post-create></app-post-create>
<app-post-list></app-post-list>
</main>
</div>
并在app.component.css中
html, body, app-root, .app-frame {
overflow: hidden;
margin: 0;
height: 100%;
box-sizing: border-box;
color: #e0e0e0;
}
我仅在Angular 6的实践应用程序中对此进行了测试，但我怀疑它也将在Angular 5中运行。
之前：
后：
小智 5
如果您在项目开始后添加角度材质，您只需手动将mat-app-background类添加到index.html 中的body元素，如下所示：
<body class="mat-typography mat-app-background">
...
</body>
| 归档时间： |
|
| 查看次数： |
4691 次 |
| 最近记录： |