CODEWITHSUNDEEP
javascriptcssangularangular-material
Nikita Kachan
Nikita Kachan

Reputation: 73

Transparent background in angular material dialog

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

Upvotes: 7

Views: 15329

Answers (2)

Alisson Reinaldo Silva
Alisson Reinaldo Silva

Reputation: 10705

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

Upvotes: 5

Gourav Garg
Gourav Garg

Reputation: 2911

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

See here

Upvotes: -1

Related Questions