mat-dialog changes css unexpectedly in Angular Material 15

Question

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?

Impellent

Angular Material 15 is full of changes. See here: material.angular.io/guide/mdc-migration – Vaporizer

Answer 1

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

Impellent

Answer 2

Are you using a custom theme? In my case the missing typography property in my theme definition was missing:

$theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette,
    //border: $border-palette
  ),
  typography: mat.define-typography-config(), // This line
  density: 0,
));

After adding the property the css variables with the --mdc prefixes are available and the application the dialog component looks good to me. For me it fixed some other modules like the Mat-Button as well.

Yuyuan

Yes I have this included. The variables are also there but just with different settings as mentioned in my first post. Also I think this typography does not directly affect dialog typography. – Impellent