如何根据材质主题更改 mat-dialog-title 颜色？

问题描述

我正在使用 Angular Material Dialog 并尝试根据 Material 主题动态更改对话框的标题颜色。

<h1 mat-dialog-title color="primary">{{ title }}</h1>

它不起作用，但如果我使用css设置颜色，我可以根据这个改变颜色：

[mat-dialog-title] {
  background: #369;
}

但是，我需要将其更改为 primary、accent 等，因为我可以应用于垫子按钮。出于这个原因，我尝试在 scss 文件中进行一些设置，但我无法通过某些变量将颜色更改为 primary（我不确定 scss 中是否有必要的变量文件）。那么，如何通过一些变量 $primary 将颜色设置为当前主题的主颜色？

解决方法

你可以使用 ngStyle，如果你想改变多个东西，但如果你只想改变颜色，你可以做这样的事情

<h1 mat-dialog-title [style.color]="myColorVar">{{ title }}</h1>

更详细的解释可以参考这个链接 https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/#_ngstyle

,

对话框以及其他覆盖样式可以通过向覆盖添加新的主题类来更新。这里有两个主题，第二个主题将通过向根节点添加类 'alternate-theme' 来应用。

@import '~@angular/material/theming';
@include mat-core();

$primary-palette: mat-palette($mat-pink,A200,900,50);
$accent-palette: mat-palette($mat-light-blue,500,A100);
$warn-palette: mat-palette($mat-red,700,A100);
$basic-theme: mat-dark-theme($primary-palette,$accent-palette,$warn-palette);
@include angular-material-theme($basic-theme);

$alt-primary-palette: mat-palette($mat-teal);
$alt-accent-palette: mat-palette($mat-pink,600);
$alt-warn-palette: mat-palette($mat-amber,A100);
.alternate-theme {
  $alternate-primary: $alt-primary-palette;
  $alternate-accent: $alt-accent-palette;
  $alternate-warn: $alt-warn-palette;
  $alternate-theme: mat-light-theme($alternate-primary,$alternate-accent,$alternate-warn);
  @include angular-material-theme($alternate-theme);
}

但是一些角度组件是单独放置的，例如对话框。为了使其正常工作，还可以将类“alternate-theme”应用于该叠加层：

constructor(private overlay: OverlayContainer) {}

然后切换主题时

 switchTheme(theme: string) {
   if (theme === 'light') {
     this.overlay.getContainerElement().classList.add('alternate-theme');
   } else {
     this.overlay.getContainerElement().classList.remove('alternate-theme');
   }
 }