Angular Material 19自定义主题中mat-typography未生效求助

问题核心：通过ng add @angular/material启用typography后，body已带有mat-typography类，但自定义主题仅调用mat.theme()时，只会给Material组件注入排版样式，不会自动给<h1>、<p>等原生HTML标签生成对应规则，导致这些标签无法应用配置的Roboto排版。

解决方法：在自定义主题样式表中，单独给mat-typography类调用Angular Material的排版混合宏，手动生成原生标签的样式规则。

修改后的主题代码示例：

@use "@angular/material" as mat;

// 定义自定义排版配置（若无需额外自定义，可直接使用默认配置）
$custom-typography: mat.define-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif'
);

html {
  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$spring-green-palette,
      ),
      typography: $custom-typography,
      density: 0,
    )
  );
}

// 关键：为mat-typography类添加原生标签的排版规则
.mat-typography {
  @include mat.typography-hierarchy($custom-typography);
  @include mat.typography-base($custom-typography);
}

如果不需要自定义排版配置，也可以直接使用默认配置简化代码：

@use "@angular/material" as mat;

html {
  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$spring-green-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

.mat-typography {
  @include mat.typography-hierarchy(mat.default-typography-config($font-family: 'Roboto, "Helvetica Neue", sans-serif'));
  @include mat.typography-base(mat.default-typography-config($font-family: 'Roboto, "Helvetica Neue", sans-serif'));
}

说明：

• mat.typography-hierarchy()会生成h1-h6、p、blockquote等标签的排版样式
• mat.typography-base()会设置基础的文本样式（如行高、字重等）
• 预定义主题（如Angular Material默认生成的主题文件）中已包含这些规则，但自定义主题需要手动添加才能让原生标签继承样式

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