MatDialog changes in Angular Material 15

Since Angular Material 15 the MatDialogs look quite different than they used to. Especially the font sizes are different. The CSS has changed:


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

If you are used to have the same styles in your dialogs as in your pages you can revert these changes by overwriting the CSS:


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

With inherit, the style of the parent element will be used. This way the dialogs will not look different anymore.