Angular Material 5 深色主题未应用于 body-6ren

Angular Material 5 深色主题未应用于 body

转载作者：行者123 更新时间：2023-12-04 22:18:24

25

4

我创建了一个“自定义”主题，(使用 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 覆盖层有关，因为如果我删除将类名添加到覆盖层的部分，它会起作用 - 页面的背景确实设置正确，但是覆盖层没有获得正确的样式。

最佳答案

我遇到了同样的问题，发现 this solution on the Angular Material GitHub issue#3298 (post by 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。

之前:

Before

之后:

关于 Angular Material 5 深色主题未应用于 body ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49734551/

25

4

0

文章推荐： Angular2 - 不能动态更改输入类型

文章推荐： R markdown to PDF - 打印控制台输出

文章推荐： mysql - 如何在 ddev 中创建和加载第二个数据库？

r - 应用于 3 个变量的数据框转换
我写了几个命令来转换数据框，但我想将我写的代码简化为四个部分。第 1,2 和 3 部分用于计算第 1、2 和 3 列(计算每列重复值的次数，并完成 0 和三列最大值之间的缺失数)。第四部分是加入前面的
scala - 应用于 Scala 函数的类型参数
我试图理解应用于函数的类型参数。我想在下面的方法中使用通用类型，但为了我的理解使用 String 和 Int。当我如下定义一个函数时 def myfunc[Int](f:String => I
应用于 DIV 内容的 CSS
我有一个像下面这样的 DIV: // link to some js .js 在 div 中呈现最新的文章摘要。然而，它在 Calibri
gridview - 应用于 gridview 中的边界字段的格式不起作用
我在 GridView 中有以下列，一列是日期，另一列是美元金额。我应用了格式并将 HtmlEncode 属性设置为 false，但值仍然未格式化: 这就是这些值在 GridView 中的显示方式
haskell - 应用于 Haskell 中标记类型的通用函数
假设我已经定义了这些类型: data Km = Km Float deriving (Show, Eq) data Mile = Mile Float deriving (Show, Eq
haskell - 关于上下文中的值(应用于 Monad)
我有一个关于 value in context 的小问题。取 Just 'a'，所以在这种情况下 Maybe 类型上下文中的值是 'a' 采用[3]，因此在这种情况下，[a] 类型上下文中的值为3
rollapply 应用于 xts 对象
require(quantmod) require(PerformanceAnalytics) getSymbols('INTC') x<- monthlyReturn(INTC) rollapply
vba - 应用于 Word 修订版的更改使两个段落合二为一
我正在使用 VBA 对“已应用字轨更改”文档进行更改。红色段落结束标记是插入段落结束标记。(打开“跟踪更改”> 将光标放在第一段末尾 > 按 Enter > 插入新段落内容 > 格式风格不同) 我需
c++ - 应用于 const 和非常量对象的引用返回方法
考虑以下代码: class A{ my_method(const B& b){ import_something_from_c(this, b.getC()); // does some
ios - 应用于 Material 时像素化图像纹理
我正在为自定义 Material 分配图像。分配的图像看起来有点像素化，类似于此图像我已经将抗锯齿设置为 4 倍。我该如何解决这个问题？最佳答案尝试将 Material 的 mipFilter
css - 应用于 HTML 元素的样式总是被覆盖
我将样式应用于元素和元素。是否可以在上使用样式元素应用于似乎不遵循 CSS 特异性的通常规则。这是真的吗？示例:http://jsfiddle.net/59dpy/ 尝试将所有背景色设为红
html - 应用于 TD 时垂直虚线边框不均匀
有没有办法将垂直虚线边框应用于没有他们(边界)合并？我说的是附图上的东西——有 3 个这里的元素，每个元素包含 2 的。如果我申请 border-right: 1px dashed black到
html - 应用于 body 时线性渐变不起作用
当我在 CSS 中对主体应用线性渐变时，如下所示 body { background: linear-gradient(#10416b, black); } 它不会将它应用到整个网页，而是将它应用到页
css - 应用于 td 的边界半径没有内半径
当我将边框和边框半径应用于 td 时，内半径是一个直 Angular ，根本不是圆的。最佳答案问题很可能是背景不透明的子元素会剪掉边框的内半径。要解决此问题，您可以在 td 上应用 overfl
CSS 应用于 SVG 组元素但不在使用时
基本上，我有一个小的 SVG，它使用一个组来定义一个可重用的符号。该组包括我想在 CSS 中设置动画的路径。我面临的问题是只有“原始”元素应用了 CSS，“使用过”的元素没有。 .player_arr
html - 应用于 td 的宽度属性
宽度属性在这里不起作用: td { height: 50px; width: 25px; border: 1px
Java:应用于 Map 泛型类型的多态性
我想要一个函数(例如)在两种情况下输出 Map 的所有值: Map map1 = new HashMap(); Map map2 = new HashMap(); output(map1, "1234
java - 应用于 AlertDialog 的样式无法正常工作
我被要求将我们应用中的警报对话框的外观与应用主题使用的外观相匹配。我设法将样式应用于应用程序中的所有警报对话框，并将其用作应用程序主题的一部分，但有些情况下样式应用不正确。例如，当警报对话框包含“
ios - 应用于 CGPath 的比例变换会影响渲染质量吗？
我有一个 CGPath(由 UIBezierPath 创建)，我想通过应用 CGAffineTransformScale 将其缩放到我想要的任何大小。这会影响我的绘图质量(在转换为图像时)吗？如果不
c++:应用于 vector 的STL算法也适用于其他容器对象吗？
您好，我已经在 vector 上使用了一些 STL 算法，例如 find_if、count_if、sort、push_back 等。现在我想为所有容器对象( vector 、列表、映射、集合)制作一个

首页

博学

6Ren·AI

商城

Angular Material 5 深色主题未应用于 body