I am trying to change the color of the angular material dialog using css var (), but instead of the color I need, the background bees 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'
    });
  }

I am trying to change the color of the angular material dialog using css var (), but instead of the color I need, the background bees 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'
    });
  }

• javascript
• css
• angular
• angular-material

• Does this answer your question? How to close a mat dialog without a backdrop on clicking outside? – Dane Brouwer Commented Mar 17, 2021 at 12:40

2 Answers 2

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

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

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

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

See here