I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig.
Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (just for testing), but when the dialog opens, the red panel briefly shows before being covered by the actual white background of the dialog. Refer to the attached image for clarification.
Upon opening the Dialog, the red background is momentarily visible https://i.stack.imgur.com/5XsBt.png
In a split second, the real form conceals the red backdrop https://i.stack.imgur.com/b7PMM.png
This outcome diverges from my intention. My goal is to have the ACTUAL FORM's background appear red. So, my query is, how can I correctly change the background color? Here is the code snippet I am working with:
Thank you
The function that initiates the form
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;
}