Transparent background in angular material dialog

user_13012629 0
Viewed 8706

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'
    });
  }
angular-material angular css javascript
2 Answers

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

user_22635070

To change anything in angular-material library UI, need to add css in styles.scss i.e. root level.

See here

user_54294280
Related