Angular Material v16中如何获取自定义组件内的排版层级样式

在Angular Material v16中，核心的排版样式复用逻辑没有变化，但样式导入路径的写法有调整——不再需要~前缀，因为Angular CLI的样式处理机制已经可以自动解析node_modules中的依赖路径。

等效的默认排版配置写法 #

@import '@angular/material/theming';

// 初始化默认排版配置
$config: mat-typography-config();

.unicorn-title {
  @include mat-typography-level-to-styles($config, title);
}

如果使用自定义主题的排版配置 #

如果你项目中定义了自定义主题，可以直接从主题中提取已配置好的排版规则，避免重复初始化：

@import '@angular/material/theming';

// 假设你已经定义了自定义主题（示例）
$custom-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
  ),
  typography: mat.define-typography-config(
    // 自定义排版配置项
  )
));

// 从自定义主题中提取排版配置
$config: map-get($custom-theme, typography);

.unicorn-title {
  @include mat-typography-level-to-styles($config, title);
}

关键变化说明 #

• 移除了导入路径中的~前缀：@import '@angular/material/theming'替代旧写法@import '~@angular/material/theming'
• mat-typography-config()函数和mat-typography-level-to-styles混入的用法完全保留，无需修改

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