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?

Angular Material 15 is full of changes. See here: https://material.angular.io/guide/mdc-migration — Benny Halperin, Apr 19 '23 at 16:09

score 0 · Answer 1 · answered Aug 03 '23 at 07:58

you can update thoses material variables inside a theme scss file.

Selectors available are : Caption / subtitle-2 / headline-6 ...

you can find the list on the official material angular : https://v15.material.angular.io/guide/typography

But i don't know how to update theses styles value : --mdc-dialog-supporting-text-color

Example for a button (logic is the same for others selectors)

@use '@angular/material' as mat;
/* Styles to be applied to buttons */
$myapp-button: mat.define-typography-level(
  $font-family: 'Roboto',
  $font-weight: 500,
  $font-size: 40px,
  $line-height: 1,
  $letter-spacing: normal
);

/* Merge custom configs into existing config
  this will redefined material angular variable --mdc-typography-button
  Ex : font-size: var(--mdc-typography-button-font-size, 14px);
  It is possible to redefine others values Ex Caption / subtitle-2 / headline-6 ...
  The list is present on the official material angular : https://v15.material.angular.io/guide/typography */
$myapp-config: mat.define-typography-config(
  $button: $myapp-button
);

/* Apply custom config */
@include mat.all-component-typographies($myapp-config);

@mixin typography($theme) {
  $custom-typography-config: mat.get-typography-config($theme);
}

/* Define custom app-theme based on custom-configs */
$app-theme: mat.define-light-theme(
  (
    typography: $myapp-config
  )
);


/* Apply custom app-theme */
@include typography($app-theme);

Result :

source : Angular Material 15: How to customize the styling of buttons and input fields?

This just describes the basics of configuring the typography, but it's not related to mat-dialog and the issue described in the question. — Snaketec, Aug 15 '23 at 08:06

score 0 · Accepted Answer · answered Aug 15 '23 at 08:08

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

mat-dialog changes css unexpectedly in Angular Material 15

2 Answers2