docs-bug(MAT-DIALOG): How properly style your mat-dialog

[mattiLeBlanc]

Documentation Feedback

I can't find any information on how to properly style your mat-dialog. In AM15, I see that variables are used, like --mdc-dialog-container-color.
I am trying to change the background color of mat-mdc-dialog-surface mdc-dialog__surface and I can of course just add some custom CSS, but I rather do a proper configuration of the mat-dialog mixin so that it applies to all dialogs.

Where can I find examples of styling your mat-dialog?

Affected documentation page

https://material.angular.io/components/dialog/api

[wagnermaciel]

Hi! Currently, the only supported way of styling components is through our theming API. In this case, the mat-dialog's color mixin is probably what you're be looking for - https://github.com/angular/components/blob/main/src/material/dialog/_dialog-theme.scss#L10

I'm not sure of how customizable the dialog's styles are currently, but we are actively working on a new theming system which will give devs finer-grained control over component styles in a supported / non-brittle way. Unfortunately, this is still many months away from being finished and stable

[mattiLeBlanc]

Okay, I will have a look. And very happy to hear a new theming system is in the works. That would be amazing, so we can cut down on all those ng-deeps and css overrides which creates trouble with positioning of floating elements like mat-labels in a mat-form-field.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}