Angular Material 17自定义组件中如何获取排版层级样式？

1. mat.typography-level-to-styles 在v17中的可用性 #

mat.typography-level-to-styles 在Angular Material v17版本中仍然可用，它是官方提供的SCSS工具mixin，用于将排版配置中的指定层级（如subheading-1）转换为对应的CSS样式属性（字体大小、行高、字重等）。

2. 自定义排版生效的步骤 #

要让你定义的$config排版配置全局生效并能被自定义组件访问，需完成以下操作：

步骤1：全局应用自定义排版配置 #

在全局样式文件（通常是styles.scss）中，定义排版配置并通过mat.all-component-typographies全局注入：

@use '@angular/material' as mat;

// 定义自定义排版配置
$config: mat.define-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $headline-1: mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3: mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2: mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $display-1: mat-typography-level(34px, 40px, 400),
  $headline: mat-typography-level(24px, 32px, 400),
  $title: mat-typography-level(20px, 32px, 500),
  $subheading-2: mat-typography-level(16px, 28px, 400),
  $subheading-1: mat-typography-level(15px, 24px, 400),
  $body-2: mat-typography-level(14px, 24px, 500),
  $body-1: mat-typography-level(14px, 20px, 400),
  $caption: mat-typography-level(12px, 20px, 400),
  $button: mat-typography-level(14px, 14px, 500),
  $input: mat-typography-level(inherit, 1.125, 400)
);

// 全局应用到所有Material组件，并生成对应的CSS变量
@include mat.all-component-typographies($config);

这一步会将自定义排版应用到所有Angular Material组件，同时自动生成对应的CSS变量（如--mat-typography-subheading-1-font-size），供自定义组件直接使用。

步骤2：在自定义组件中获取排版样式 #

有两种常用方式可以在自定义组件内部获取排版层级样式：

方式1：使用SCSS Mixin（推荐）

如果你已经定义了expansion-panel-group-typography这样的自定义mixin，只需在组件的SCSS文件中导入配置并调用该mixin即可：

@use '@angular/material' as mat;
// 假设自定义排版配置和mixin在typography.scss文件中
@use '../path/to/typography.scss' as custom-typography;

// 调用自定义mixin，将subheading-1样式应用到组件元素
@include custom-typography.expansion-panel-group-typography(custom-typography.$config);

或者直接在组件样式中调用mat.typography-level-to-styles：

@use '@angular/material' as mat;
@use '../path/to/typography.scss' as custom-typography;

.expansion-panel-group-header {
  // 直接将配置中的subheading-1层级样式转换为CSS属性
  @include mat.typography-level-to-styles(custom-typography.$config, subheading-1);
}

方式2：使用自动生成的CSS变量

Angular Material v17会根据你的排版配置自动生成全局CSS变量，你可以直接在组件样式中引用这些变量，无需依赖SCSS：

.expansion-panel-group-header {
  font-size: var(--mat-typography-subheading-1-font-size);
  line-height: var(--mat-typography-subheading-1-line-height);
  font-weight: var(--mat-typography-subheading-1-font-weight);
  letter-spacing: var(--mat-typography-subheading-1-letter-spacing);
  font-family: var(--mat-typography-font-family);
}

这种方式更适合纯CSS开发场景，或者不需要SCSS预处理器的情况。

关键注意事项 #

• 确保使用Angular Material v17推荐的@use语法导入模块，而非过时的@import。
• 自定义排版配置文件如果抽离为单独文件，需确保组件样式能正确导入该文件路径。
• 如果组件使用了ViewEncapsulation.None，全局排版样式会直接生效；默认的Emulated封装模式下，需通过上述方式显式引用排版样式。

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