Can't change the background color of MatDialog

I'm having some issues changing the background color of my dialog components, and have exhausted all the answers from similar posts here on stackoverflow.

In styles.scss i have the following class:

.dialog-panel {
    background: red !important;
}

And I open my using this class:

const dialogRef = this.dialog.open(CreateOrEditTaskDialogComponent, {
    panelClass: 'dialog-panel'
});

The problem is that upon opening the dialog it is red but within less than a second it fades back to default. Here is a screenshot right after opening the dialog:

And here is a screenshot of the dialog after the red had "faded". If you look closely you can even see the red background in the corners because of the border radius.

It looks like it might be "mat-mdc-dialog-surface mdc-dialog__surface" that is surfacing on top? But I could not find much about this online.

--EDIT--
I made this example that shows the issue: https://stackblitz.com/edit/angular-kejni3?file=src%2Findex.html

you can change it like this:

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

this will change the color of the dialog. if you have a div in you dialog and it has color, you should customize its color too.

Overwrite Material Web Component CSS var in charge of colouring dialog container.

You can do that directly in your custom panel class

.custom-dialog-panel {
  --mdc-dialog-container-color: red;
}

const dialogRef = this.dialog.open(CreateOrEditTaskDialogComponent, {
    panelClass: 'custom-dialog-panel'
});

You may access dialog surface property from global-styles.css

.dialog-panel
  .mat-mdc-dialog-container
  .mdc-dialog__container
  .mat-mdc-dialog-surface {
  background-color: red;
}

Here is a working example.