cssangularangular-materialmat-dialog

mat-dialog changes css unexpectedly in Angular Material 15

Since Angular Material 15, the content of the mat-dialog has some weird css:

.mat-mdc-dialog-container .mdc-dialog__content {
    color: var(--mdc-dialog-supporting-text-color, black);
}

.mat-mdc-dialog-container .mdc-dialog__content {
    font-family: var(--mdc-dialog-supporting-text-font, "Arial");
    line-height: var(--mdc-dialog-supporting-text-line-height, 14px);
    font-size: var(--mdc-dialog-supporting-text-size, 14px);
    font-weight: var(--mdc-dialog-supporting-text-weight, 500);
    letter-spacing: var(--mdc-dialog-supporting-text-tracking, 1px);
}

This css will cause every basic text to be displayed totally different than in the rest of the application. For me it is not clear if this behaviour is by design, a bug or I do something wrong in my application?

Solution

  • This is the workaround I currently use, to prevent the dialog from overwriting the default styles:

    .mat-mdc-dialog-container .mdc-dialog__content {
  color: inherit !important;
}

.mat-mdc-dialog-container .mdc-dialog__content {
  line-height: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}