我一直在尝试使用MatDialogConfig的panelClass属性来更改Angular Material对话框的背景色。
但它似乎是半工作。我尝试将背景颜色设置为红色（出于测试目的），当您打开对话框时，我可以看到红色面板实际上是在被白色背景的实际对话框覆盖之前出现的。请看附件中的图片来了解我的意思。

• 对话框打开后立即应用红色背景 *
  

• 在一瞬间，实际表单覆盖了红色背景 *
  

这不是我想达到的目的我试图使实际形式的背景颜色为红色。那么我的问题是，我如何正确地改变背景颜色？这是我得到的代码。
谢啦，谢啦

打开表单的方法

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);
    })

  }

字符串

对话框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;
  }

型