Angular Material自定义排版不生效：Toolbar字体层级修改问题

你的自定义样式被Angular Material主题生成的高优先级样式覆盖了——Toolbar默认会对内部标题元素（如<h1>）或更具体的组件类应用headline-6排版。可以用以下几种方法修改Toolbar的默认排版：

1. 提升选择器优先级 #

使用更具体的选择器匹配Toolbar内部元素，或增强选择器权重，确保自定义样式优先级更高：

// 针对Toolbar内的默认标题元素（通常为h1）
.mat-toolbar h1 {
  @include mat.typography-level($typography-global-config, 'subtitle-2');
}

// 或增强选择器权重覆盖全局Toolbar样式
.mat-toolbar.mat-toolbar {
  @include mat.typography-level($typography-global-config, 'subtitle-2');
}

2. 在主题文件中覆盖排版 #

在主题定义代码之后添加Toolbar排版覆盖，确保这段代码在mat.all-component-themes之后执行：

// 先定义排版配置和主题
$typography-global-config: mat.define-typography-config(...);
$my-theme: mat.define-light-theme(
  (
    color: $my-color-config,
    typography: $typography-global-config,
  )
);

// 生成所有组件主题
@include mat.all-component-themes($my-theme);

// 覆盖Toolbar排版
.mat-toolbar {
  @include mat.typography-level($typography-global-config, 'subtitle-2');
}

3. 使用Typography指令 #

在模板中直接给mat-toolbar绑定typography属性，指定目标排版层级：

<mat-toolbar [typography]="'subtitle-2'">
  你的Toolbar内容
</mat-toolbar>

需确保模块中导入MatTypographyModule：

import { MatTypographyModule } from '@angular/material/typography';

@NgModule({
  imports: [
    // 其他模块
    MatTypographyModule
  ]
})
export class YourFeatureModule { }

4. 自定义CSS类 #

创建自定义类并应用到Toolbar上：

.toolbar-subtitle-2 {
  @include mat.typography-level($typography-global-config, 'subtitle-2');
}

模板使用：

<mat-toolbar class="toolbar-subtitle-2">
  你的Toolbar内容
</mat-toolbar>

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