主页 / coding / 问题 / 79410996
Accepted
ViktorE
Asked: 2025-02-04 16:17:31 +0800 CST

Angular Material 19 - mat-typography 不适用于自定义主题

  • 772

我使用 angular 19 设置了一个新的 angular 项目，遇到了标题中提到的问题。使用 ng add cli 命令添加了材料，并在提示是否要使用排版时选择“是”。到目前为止，这很有效，我的 body 元素现在具有 mat-typography 类。

接下来，我根据文档设置自定义主题，我的主题声明如下：

@use "@angular/material" as mat;

html {
    @include mat.theme(
        (
            color: (
                theme-type: light,
                primary: mat.$spring-green-palette,
            ),
            typography: Roboto,
            density: 0,
        )
    );
}

还按照材料文档将 Roboto 字体添加到我的元素中。此后，材料组件已应用正确的字体和排版，但诸如 等“普通”html 标签<h1>则<p>不然。在预定义主题中搜索应应用的规则，如果我将它们复制到我的主样式表中，它们可以正常工作，但似乎自定义主题不包含它们，即使在主题配置中设置了排版部分。

截图显示了两种情况之间的差异：

字体不适用于 h1 和 p

正确应用排版

有没有人遇到过这个问题？如果是，找到了解决办法吗？

css

1 个回答

  1. Best Answer

    我在 github 上提出了一个问题并附上我的分析，请按照它来了解根本原因：

    错误（主题）：使用 mat.theme 创建主题时，无法像使用 mat.define-theme 那样配置字体 #30444

    更可靠的解决方案：

    直到这个问题得到解决mat.define-theme，请mat.typography-hierarchy尝试为所有元素配置排版。

    @use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$spring-green-palette,
    ),
    typography: (
      plain-family: Roboto,
      brand-family: Open Sans,
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
    density: (
      scale: 0,
    ),
  )
);
body {
  @include mat.core();
  @include mat.all-component-themes($theme);
}

@include mat.typography-hierarchy($theme);

html {
  height: 100%;
}

    Stackblitz 演示

    黑客解决方案：

    似乎这种方法（mat.theme(）没有设置排版（因为没有返回主题来存储在变量中），您可以尝试这个快捷方式，它存在于角度/材料示例中：

    @use '@angular/material' as mat;

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;

  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: mat.$spring-green-palette,
      ),
      typography: Roboto,
      density: 0,
    )
  );
}

html {
  height: 100%;
}

    Stackblitz 演示

    • 1

相关问题