如何使用变量覆盖 Angular 8 材质样式颜色？

Question

我需要更改此 css 代码的背景颜色

.mat-toolbar.mat-primary {

背景

: #d12626; 颜色：#fff; }

.mat-toolbar.mat-primary {
    background: #d12626;
    color: #fff;
}

我需要为上面的代码更改background。如何做到这一点
我试过了

 [ngStyle]='    .mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }
'

但不工作
然后我从 stackoverflow 得到另一个建议

[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need  [style.mat-toolbar.mat-primary.background]='#d12626'; but not working

我用过这个

.mat-toolbar.mat-primary {
        background: #d12626;
        color: #fff;
    }

CSS 代码中的代码，它正在工作，但我需要动态更改颜色。
我还需要更新他的颜色
原色
主光色
主要深色
次要颜色
二次光色
次深颜色
主文本颜色
二级文本颜色

Answer 1

如果主要由 css 变量设置而不是静态十六进制值，则材质动态颜色将是可能的，有人已经发布了 library 通过覆盖 css 变量要使用的主要颜色来解决此问题。

1️⃣ 安装 angular-material-css-vars 库 npm i angular-material-css-vars -S

2️⃣在应用模块上导入MaterialCssVarsModule

@NgModule({
  imports: [
    ...
    MaterialCssVarsModule.forRoot(),
  ],
   ...
})
export class AppModule {}

3️⃣ 使用此服务? MaterialCssVarsService 更改有角材质的主色，如主色、次色、暖色...

export class component {
  constructor(public materialCssVarsService: MaterialCssVarsService) {
    const hex = "#3f51b5"; // set default color color
    this.materialCssVarsService.setPrimaryColor(hex);
  }

  setPrimaryColor(color: string) {
    this.materialCssVarsService.setPrimaryColor(color);
  }
}

您需要删除任何现有的@import '~@angular/material/theming'；从您的主样式表文件中。

?demo ?‍♂️

您可以查看此question create angular material theme with css variables 以获得更多帮助

Answer 2

如果没有 hack，就不可能动态更改 Angular 应用程序的颜色，因为使用 Angular Material 设置应用程序样式的方法是使用主题（在此处描述 https://material.angular.io/guide/theming），而你的主题 scss 文件将是在构建时编译为 css。

我认为即时更改应用颜色的唯一技巧是确定要更改的十六进制颜色（主要、次要等），然后使用 serch 在文档中重写样式标签/替换。

但请记住，Angular Material 并非旨在让用户更改主题和颜色，因为它们提供的调色板和色调旨在提供良好的对比度和有关 UX 的最佳实践。这就是为什么我给你的解决方案真的是一个 hack。

Answer 3

动态样式

您应该将 CSS 属性设置为驼峰式，因为 font-size 应该是这样的 [style.fontSize.px]。你从how-to-apply-dynamic-styles?查看其他解决方案。

覆盖样式

我们可以通过将:host 与::ng-deep 选择器结合使用来实现这一点，并且很可能用于覆盖Material 样式：

:host ::ng-deep h2 {
    color: red;
}

Angular 材质的自定义主题

您可以更改一组将应用于 Angular Material 组件的颜色。 https://material.angular.io/guide/theming

Answer 4

不要将材质颜色设置为主要或次要，然后您可以像这样使用ngStyle

<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
  <mat-toolbar-row>
    <span>Main Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>

bgColor 只是一个组件属性，当你不设置颜色属性时，组件没有任何类，所以很容易改变样式

demo ?