Angular14下Angular Material自定义排版适配Figma原型策略咨询

针对Angular 14版本，完全不需要走「全量自定义配置+手动覆盖所有内置组件样式」的重维护方案，最优实现是走内置层级覆盖+自定义层级扩展的组合路线，核心逻辑是复用Angular Material原生的排版体系能力，只替换配置值、不推翻体系本身。

第一步：映射覆盖内置13个排版层级，自动适配所有Material内置组件 #

Angular Material的自定义排版API原生支持全量重写所有内置层级的字号、行高、字重、字间距属性，不需要单独给每个组件写样式覆盖。
你只需要先把设计稿定义的样式和Material自带的13个层级做语义对齐，比如：

• Material的button层级对应设计稿里的按钮文字
• Material的headline层级对应设计稿里的页面一级标题
• Material的caption层级对应设计稿里的辅助说明文字
  对齐后直接在主题配置里重写每个层级的参数即可，示例代码：

@use '@angular/material' as mat;

// 全局字体家族优先配置
$project-font-family: '"PingFang SC", "Microsoft Yahei", sans-serif';

// 覆盖内置排版层级参数，100%对齐设计稿值
$base-typography-config: mat.define-typography-config(
  $font-family: $project-font-family,
  $display-1: mat.define-typography-level(56px, 64px, 300, $letter-spacing: -0.05em),
  $display-2: mat.define-typography-level(48px, 56px, 300, $letter-spacing: -0.03em),
  $headline: mat.define-typography-level(32px, 40px, 500),
  $title: mat.define-typography-level(24px, 32px, 500),
  $subheading-2: mat.define-typography-level(20px, 28px, 500),
  $subheading-1: mat.define-typography-level(16px, 24px, 500),
  $body-2: mat.define-typography-level(14px, 22px, 400),
  $body-1: mat.define-typography-level(16px, 24px, 400),
  $caption: mat.define-typography-level(12px, 16px, 400, $letter-spacing: 0.01em),
  $button: mat.define-typography-level(14px, 20px, 500, $letter-spacing: 0.02em),
  $input: mat.define-typography-level(14px, 20px, 400),
  $overline: mat.define-typography-level(12px, 16px, 400, $letter-spacing: 0.04em),
  $badge: mat.define-typography-level(10px, 12px, 500, $letter-spacing: 0.02em)
);

配置完成后，所有Angular Material内置组件（按钮、输入框、菜单、弹窗等）会自动读取对应层级的样式，完全不需要手动写CSS覆盖，后续设计稿调整内置层级对应样式时，只需要修改这一处配置即可全局生效。

第二步：扩展自定义排版层级，满足超出内置体系的样式需求 #

针对设计稿里多出来的、和内置13个层级语义不匹配的字体样式，直接在排版配置里追加自定义层级即可，用法和内置层级完全一致，后续新增样式也可以随时在配置里扩展，示例：

$full-typography-config: mat.define-typography-config(
  // 先传入前面写好的内置层级覆盖配置
  $font-family: $project-font-family,
  // 上述13个内置层级配置全部保留
  // 追加自定义层级
  $stat-card-number: mat.define-typography-level(48px, 56px, 700, $letter-spacing: -0.02em),
  $table-header: mat.define-typography-level(13px, 20px, 600, $letter-spacing: 0.02em),
  $form-label-required: mat.define-typography-level(14px, 20px, 500, $letter-spacing: 0)
  // 后续新增样式直接在此处追加即可
);

自定义层级的调用方式和内置层级完全一致：

• 在SCSS中可以通过mat.typography-level($full-typography-config, $stat-card-number)直接获取对应样式
• 在模板中可以通过[matTypography]="'stat-card-number'"指令直接给元素应用样式，不需要手动写CSS类

第三步：将排版配置接入全局主题完成生效 #

最后把完整的排版配置传入主题定义，全局引入组件排版样式即可：

$custom-theme: mat.define-light-theme((
  color: (
    primary: $your-primary-palette,
    accent: $your-accent-palette,
    warn: $your-warn-palette
  ),
  typography: $full-typography-config,
  density: 0
));

// 全局应用排版和主题样式
@include mat.all-component-typographies($custom-theme);
@include mat.all-component-themes($custom-theme);

方案优势 #

和全量自定义字体、手动覆盖内置组件的方案相比，这套实现的维护成本极低：

• 没有重复的样式覆盖代码，不会出现Angular版本升级后自定义覆盖样式失效的问题
• 所有排版规则全收口到同一套配置，自定义组件和Material内置组件共用一套字体规则，不会出现样式不一致的问题
• 后续新增、调整字体样式只需要修改配置文件，不需要遍历全项目业务代码

内容的提问来源于stack exchange，提问作者Gabriel Santos Lemos