如何在Angular项目中覆盖Angular Material的body排版样式？

嘿，我来帮你搞定这个问题！看你已经在自定义主题里搭好了基础框架，只差几步就能让自定义排版覆盖body的默认样式，下面是具体操作：

1. 补全并完善自定义排版配置 #

先把你没写完的$my-typography补完整，确保字体族正确，还能按需调整body文本的字号、行高、字重：

$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed", sans-serif',
  // 可选：自定义body文本的细节样式，比如调整字号和行高
  $body-1: mat-typography-level(14px, 20px, 400),
  $body-2: mat-typography-level(14px, 20px, 500)
);

2. 将自定义排版传入mat-core() #

默认情况下mat-core()用的是Angular Material自带的排版规则，你需要把自己的排版配置传进去，这样它会自动把自定义样式应用到body上：

@include mat-core($my-typography);

3. （可选）强制覆盖body样式（避免冲突） #

如果遇到全局样式或组件样式干扰的情况，可以直接给body单独应用排版规则，用mat-typography-base混合宏生成精准的基础样式：

body {
  @include mat-typography-base($my-typography);
}

完整的my-theme.scss示例 #

把这些步骤整合后，你的主题文件应该是这样的：

@import '~@angular/material/theming';
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

// 1. 定义自定义排版
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed", sans-serif',
  $body-1: mat-typography-level(14px, 20px, 400)
);

// 2. 传入排版初始化核心样式
@include mat-core($my-typography);

// 3. 定义主题调色板
$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent: mat-palette($mat-amber, A200, A100, A400);
$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);

// 4. 应用主题到所有Angular Material组件
@include angular-material-theme($my-theme);

// 可选：强制覆盖body样式，确保优先级
body {
  @include mat-typography-base($my-typography);
}

这样操作后，你的自定义字体和排版规则就会完全覆盖Angular Material默认的body样式了。核心逻辑是mat-core()会根据传入的排版配置设置全局基础样式，而mat-typography-base则是直接生成针对body的具体排版规则，双重保障避免样式被覆盖。

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