如何根据材料主题更改mat-dialog-title颜色?

Question

我使用的是Angular材质对话框并尝试根据素材主题动态改变对话框的标题颜色。

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

它不起作用，但如果我使用css设置颜色，我可以按照以下方式改变颜色:

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

但是，我需要将其更改为primary,accent等，因为我可以应用于垫子按钮。出于这个原因，我试图在scss文件中进行一些设置，但我不能通过一些变量将颜色更改为primary(我不确定scss文件中是否有必要的变量)。那么，如何将颜色设置为primary通过一些变量$primary?

Answer 1

对话框以及其他覆盖样式可以通过添加新的主题类来更新覆盖。下面是两个主题，第二个主题将通过向根节点添加'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, 900, A100);
$warn-palette: mat-palette($mat-red, 700, 900, 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, 700, 900, 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);
}

但是一些角组件是单独放置的，例如对话框。为了使它工作，也可以对覆盖层应用class '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');
}
}

Answer 2

如果你想改变多个内容，你可以使用ngStyle但如果你只想改变颜色你可以这样做

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

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