Angular Material 16中如何正确修改Dialog的背景颜色

你遇到的问题是：通过MatDialogConfig的panelClass设置Dialog背景为红色，但打开时红色仅短暂显示，随即被表单内容的白色背景覆盖。以下是你的代码和对应的解决方案：

你的代码 #

打开Dialog的方法

public openCreateDialog(): void {
    const row = new Product();
    const dislogConfig = new MatDialogConfig();
    dislogConfig.data = row;
    dislogConfig.panelClass = 'test';

    const dialogRef = this.dialog.open(DialogComponent, dislogConfig);

    dialogRef.afterClosed().subscribe(result => {
        this.getPagedProduct(this.currentPageNum);
    })
}

Dialog组件HTML

<h1 mat-dialog-title>Dialog with elements</h1>
<div mat-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
<div mat-dialog-actions>
    <button mat-button mat-dialog-close>Close</button>
</div>

全局styles.scss

@use '@angular/material' as mat;
@use 'theme/baseTheme' as base;

html,
body {
    height: 100%;
}

.theme-primary {
    background-color: mat.get-color-from-palette(base.$s-brand-primary, 500);
}

.theme-pink {
    background-color: mat.get-color-from-palette(base.$s-brand-accent, 500);
}

.test > mat-dialog-container {
    background-color: red;
}

.mat-mdc-row:hover .mat-mdc-cell {
    background-color: #fafafa;
}

问题原因 #

Angular Material的Dialog内部mat-dialog-title、mat-dialog-content、mat-dialog-actions这些内置容器，在MDC主题下默认带有白色背景样式，会覆盖你设置的mat-dialog-container红色背景，导致红色仅在Dialog初始化时短暂显示，随后被内部元素的白色背景覆盖。

解决方案 #

修改全局styles.scss中的.test样式，同时覆盖Dialog内部元素的默认背景：

.test > mat-dialog-container {
    background-color: red;
}

/* 覆盖Dialog内部元素的默认白色背景，统一设置为红色 */
.test .mat-mdc-dialog-title,
.test .mat-mdc-dialog-content,
.test .mat-mdc-dialog-actions {
    background-color: red;
}

或者，你也可以将内部元素的背景设为透明，让外层的红色背景透出来：

.test > mat-dialog-container {
    background-color: red;
}

.test .mat-mdc-dialog-title,
.test .mat-mdc-dialog-content,
.test .mat-mdc-dialog-actions {
    background-color: transparent;
}

注意事项 #

• 确保样式写在全局styles.scss中，不要写在Dialog组件的私有样式文件里（避免样式隔离导致不生效）；
• 不需要使用::ng-deep这类已废弃特性，通过全局样式配合panelClass的优先级足够覆盖默认样式。

内容的提问来源于stack exchange，提问作者Danny