如何在Angular 16 Material项目中自定义h1排版？

问题原因 #

你配置的$headline-1排版级别不会自动覆盖原生<h1>标签的样式——mat-typography类仅为页面提供基础排版上下文，原生HTML标题标签的样式仍由浏览器默认样式或Angular的基础样式规则控制，不会自动关联到Material的排版级别定义。

解决方案 #

方案1：直接使用Material排版类

在HTML元素上添加对应Material排版级别的类，即可应用自定义配置：

<h1 class="mat-headline-1">Heading 1</h1>

方案2：全局映射原生标签到Material排版规则

如果你希望原生<h1>~<h6>等标签自动应用Material的排版样式，可以在styles.scss中使用mat.typography-hierarchy()混入（mixin），将原生标签与自定义排版配置绑定：

// 先定义你的排版配置
$my_typography: mat.define-typography-config(
  $headline-1: mat.define-typography-level(40px, 20px, 900),
);

// 定义主题
$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my_app_primary,
    accent: $my_app_accent,
    warn: $my_app_warn,
  ),
  typography: $my_typography
));

// 应用主题
@include mat.all-component-themes($my-app-theme);

// 全局映射原生标签到Material排版规则
@include mat.typography-hierarchy($my_typography);

这个混入会自动为<h1>、<h2>等原生标签生成样式，将它们关联到对应的Material排版级别（比如<h1>对应headline-1），无需手动添加类。

额外验证

确保你已经正确导入了Angular Material的SCSS核心文件，通常在styles.scss顶部有类似这样的导入：

@use '@angular/material' as mat;

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