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

Does this answer your question? [How to close a mat dialog without a backdrop on clicking outside?](https://stackoverflow.com/questions/57878327/how-to-close-a-mat-dialog-without-a-backdrop-on-clicking-outside) — Dane Brouwer, Mar 17 '21 at 12:40

score 4 · Accepted Answer · answered Jun 18 '20 at 05:34

4

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

answered Jun 18 '20 at 05:34

Alisson Reinaldo Silva

10,009
5
65
83

ng-deep & co are deprecated and should not be used. Instead define such overrides in a special file and import it to your global style. In this way it is possible to use for more than one dialog. – Thomas Renger Jan 06 '23 at 14:11

score -1 · Answer 2 · answered Apr 04 '20 at 17:18

-1

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

See here

answered Apr 04 '20 at 17:18

Gourav Garg

2,856
11
24

In my case, this doesn't help. My project structure is [here](https://stackblitz.com/edit/dark-mode-with-angular-and-css-variables?file=src%2Fapp%2Ftheme%2Flight-theme.ts) – Nikita Kachan Apr 05 '20 at 07:58
I can't see any dialog here. Is this updated or what? – Gourav Garg Apr 05 '20 at 08:20

Transparent background in angular material dialog

2 Answers2