Angular Material 15升级后自定义Typography失效求助

问题原因 #

Angular Material 15 重构了主题系统，mat.core() 混入（mixin）不再接受排版配置参数，这和 Angular 14 的用法不一致，导致出现参数不匹配的 Sass 错误。

修复步骤 #

1. 调整排版配置方式 #

使用 mat.define-typography-config 替代旧的 mat-typography-config 函数（15版本仍兼容旧函数，但推荐使用新命名），然后通过以下两种方式之一应用全局排版：

方式一：将排版绑定到自定义主题（推荐）

把排版配置传入主题定义，确保所有 Material 组件都使用自定义排版：

@use '@angular/material' as mat;

// 定义自定义排版
$my-typography: mat.define-typography-config(
  $font-family: "Lato, sans-serif"
);

// 初始化核心样式（无参数）
@include mat.core();

// 定义主题并传入排版配置
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  $color: mat.define-color-config($primary: $my-primary, $accent: $my-accent, $warn: $my-warn),
  $typography: $my-typography // 绑定排版到主题
);

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

方式二：单独应用全局排版样式

如果不需要绑定到主题，可直接调用排版相关混入来让自定义排版全局生效：

@use '@angular/material' as mat;

// 定义自定义排版
$my-typography: mat.define-typography-config(
  $font-family: "Lato, sans-serif"
);

// 初始化核心样式（无参数）
@include mat.core();

// 应用自定义排版到全局层级和工具类
@include mat.typography-hierarchy($my-typography);
@include mat.typography-utils($my-typography);

关于迁移工具未检测到问题 #

ng generate @angular/material:mdc-migration 工具主要聚焦于 MDC 组件的代码迁移，对于主题系统中混入参数的细节调整，暂时未覆盖这类场景，需要手动修改。

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