Transparent background in angular material dialog

Question

I am trying to change the color of the angular material dialog using css var (), but instead of the color I need, the background becomes transparent.

Css style:

.custom-dialog >  mat-dialog-container {
  background: var(--background);
}

Open dialog function:

openDialogForCreateDirectory(): void {
    this.dialog.open(CreateDirectoryComponent, {
      width: '400px',
      panelClass: 'custom-dialog'
    });
  }

Answer 1

You need to use ::ng-deep to force the style down to angular material components:

::ng-deep .custom-dialog > mat-dialog-container {
  background-color: var(--background);
}

See working example: https://stackblitz.com/angular/ebnbevodyrv