如何将typography配置添加到Angular Material自定义主题中？

根因说明 #

从Angular Material v14版本开始，define-dark-theme/define-light-theme函数返回的主题对象默认仅包含颜色配置，不会自动内置排版配置，颜色、排版、密度三类配置已拆为独立模块，需要手动合并到主题Sass Map中。

操作步骤 #

1. 先创建排版配置，可直接用默认配置，也可自定义字体、行高等参数
2. 将排版配置作为typography键的值，合并到你创建的颜色主题对象中
3. 后续使用合并后的完整主题对象即可

修正后代码示例 #

theme.scss #

// 1. 定义排版配置，不传参数则使用Material默认排版规则
$wb-typography: mat.define-typography-config(
  // 如需自定义字体可在此处传参，示例：
  // $font-family: 'Inter, system-ui, sans-serif'
);

// 2. 定义仅包含颜色配置的基础深色主题
$wb-color-theme: mat.define-dark-theme((
  color: (
    primary: $wb-primary,
    accent: $wb-accent,
    warn: $wb-warn,
  )
));

// 3. 合并颜色配置和排版配置，生成完整主题对象
$wb-theme: map.merge($wb-color-theme, (
  typography: $wb-typography
));

// 原有逻辑保持不变，可额外添加core混入应用全局基础排版
@include mat.core($wb-typography);
@include mat.all-component-themes($wb-theme);
@include reboot.theme($wb-theme);

修改完成后，你原有_reboot.scss中的mat.get-typography-config($theme)即可正常读取到排版配置，不会再返回null引发Sass报错。

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