Angular Material v15 Dialog排版问题：mat.mdc-dialog-typography混合未定义

Angular Material 15迁移到MDC架构后，原有的mat.mdc-dialog-typography混合已被移除，这就是你报错的原因。以下几种无需替换所有<mat-dialog-content>组件的全局排版解决方案：

方法1：通过全局CSS类直接覆盖 #

Angular Material 15的Dialog内容容器使用mdc-dialog__content类，你可以在全局样式文件（如styles.scss）或主题SCSS中直接设置排版：

// 自定义排版层级
$dialog-typography: mat.define-typography-level(15px, 22px, 400);

.mdc-dialog__content {
  @include mat.typography-level($dialog-typography);
  // 也可以直接写原生CSS样式
  // font-size: 15px;
  // line-height: 22px;
  // font-weight: 400;
}

方法2：在主题中扩展Dialog样式 #

如果想把排版配置整合到Material主题中，可以在主题定义时嵌套修改Dialog的样式：

@include mat.core();

// 定义全局自定义排版
$custom-typography: mat.define-typography-config(
  $body-1: mat.define-typography-level(16px, 24px, 400)
);

$custom-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
    ),
    typography: $custom-typography,
  )
);

// 应用所有组件主题
@include mat.all-component-themes($custom-theme);

// 单独覆盖Dialog的排版
@include mat.mdc-dialog-theme($custom-theme) {
  .mdc-dialog__content {
    @include mat.typography-level(mat.define-typography-level(15px, 22px, 400));
  }
}

方法3：修改全局排版的默认层级 #

Dialog内容默认继承全局排版的body-1层级，如果你的其他组件也可以接受这个排版调整，直接修改全局typography配置即可：

$custom-typography: mat.define-typography-config(
  $body-1: mat.define-typography-level(15px, 22px, 400) // 直接修改body-1，Dialog会自动继承
);

$custom-theme: mat.define-theme(
  (
    typography: $custom-typography,
    // 其他主题配置...
  )
);

内容的提问来源于stack exchange，提问作者whiteBear22