Angular Material v15 主题 + 版式，默认文本未设置样式

Question

当我自定义主题来设置字体时...

1. 一些文本的样式正确（例如<mat-card-title> <mat-card-action>等）
2. 但其他一些则没有（例如<p> <span> <mat-card-content>）并且默认为 Roboto...那些不应该采用 body-1 风格吗？请注意，我使用 mat-card 作为示例，但其他组件也会发生同样的情况。 https://material.angular.io/guide/typography

重现的最少步骤：

• 将 Google 字体添加到 index.html
• 在 styles.scss 中配置样式，以便新字体成为所有级别的默认字体（应该在任何地方使用）

$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-typography: mat.define-typography-config(
  $font-family: "'Nerko One', cursive",
);

$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
    ),
    typography: $my-typography,
  )
);
@include mat.all-component-themes($theme);

这是一个示例，您可以看到标题等已设置样式，但看不到卡片的内容： https://stackblitz.com/edit/angular-wan6f9 ?file=src/app/card-actions-example.html

我尝试了几种方法，包括配置每个级别，但都不起作用。唯一有效的方法是将默认值硬编码到文档的根目录，但我不想这样做。

Answer 1

我有完全相同的症状， @include mat.all-component-typographies($typography);除了@include mat.all-component-themes($my-theme);文档中的内容之外，我还拼命地添加了内容。

其中$typography与OP描述的基本相同。

然后所有的风格都按预期开始发挥作用。

Answer 2

就我而言，我使用了两个“旧版”mixin 来保持“尚未迁移到 MDC”的代码像以前一样工作：

• mat.define-legacy-typography-config()
• mat.all-legacy-component-themes($theme)

但这意味着您需要通过相应地导入来继续使用现在的遗留组件。ng update @angular/material@15这些“旧版”导入应在使用（请参阅Angular 更新指南）或在Nx 工作区nx migrate latest中使用时通过迁移自动创建。

在material.module.ts您的Stackblitz 示例中：

import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';