Angular 15中自定义Material排版配置不生效问题求助

1. 确认排版配置的正确结构 #

在styles.scss中，必须遵循「导入基础样式→定义自定义排版→生效配置」的顺序，示例如下：

// 先导入Material主题基础模块
@import '~@angular/material/theming';

// 定义自定义排版规则（基准字号是核心，Material所有排版基于此计算）
$custom-typography: define-typography-config(
  $html-font-size: 16px,
  $headings: define-typography-level(
    $font-family: 'Roboto, sans-serif',
    $font-weight: 700,
    $font-size: 3rem,
    $line-height: 1.2,
    $letter-spacing: -0.015em
  ),
  $subheadings: define-typography-level(
    $font-family: 'Roboto, sans-serif',
    $font-weight: 500,
    $font-size: 1.5rem,
    $line-height: 1.33,
    $letter-spacing: 0em
  )
);

// 方式1：单独生效排版（不关联主题）
@include angular-material-typography($custom-typography);

// 方式2：关联主题一起生效（如果项目有自定义主题）
// $custom-primary: mat.define-palette(mat.$indigo-palette);
// $custom-theme: mat.define-light-theme((
//   color: (primary: $custom-primary),
//   typography: $custom-typography // 绑定排版到主题
// ));
// @include angular-material-theme($custom-theme);

2. 确保原生HTML标签被显式覆盖 #

Angular Material默认不会自动替换所有原生标签（如h1、h2）的样式，需要手动为标签绑定排版规则：

h1 {
  @include mat.typography-level($custom-typography, 'headings');
}

h2 {
  @include mat.typography-level($custom-typography, 'subheadings');
}

3. 检查样式导入顺序 #

自定义排版代码必须写在@import '~@angular/material/theming';之后，否则Material的define-typography-config等函数未加载会导致配置失效。

4. 确认导入排版模块 #

在app.module.ts中必须导入Material排版相关模块，否则样式无法生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTypographyModule } from '@angular/material/typography'; // 导入排版模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTypographyModule // 添加到导入列表
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 清理缓存重新构建 #

浏览器缓存或Angular构建缓存可能导致样式不更新，执行以下命令重置：

ng cache clean
ng build --prod

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