9

我正在尝试实现 Angular Material Typography，但是我遇到了一些困难，我不确定可能是什么问题。

我按照 Angular在这里提供的说明进行操作，但是遇到了问题。问题是，看起来应用程序中的所有内容都受到了影响，但是有些内容被默认排版覆盖，我不确定我做错了什么。

创建和使用的排版

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

正如您在排版中看到的那样，我故意将第一个参数（字体大小）设置为100px，以便我可以查看应用程序上的所有内容是否都受到影响。

示例 #1：材质按钮

对于 Angular Material 按钮（在 html 元素 'button' 上使用 'mat-button'），我看到了我所期望的，如下所示。文本设置为 100px。 在此处输入图像描述

示例 #2：工具栏

但是对于 Mat 工具栏，我没有看到字体大小设置为 100 像素。在我看来，如下所示的默认字体大小覆盖了 100px 大小：

在此处输入图像描述

示例 #3：具有多个覆盖的不同工具栏

对于另一个工具栏上的最后一个示例，我们可以看到 100px 被添加了几次，每次都相互覆盖，直到最后一个覆盖的也是 20px，所以字体大小不是 100px。

在此处输入图像描述

细节：

此处找到的 Angular Material 指南显示我们有 3 种在应用程序中使用排版的方法：

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);

// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

据我了解，我使用的第三个选项应该适用于您使用的任何内容class="mat-typography"。所以我将它添加到body应用程序中，并在app-root. 然而，正如我们在上面看到的，只有一些应用程序受到了正确的影响。

我尝试将它添加到组件中应用程序的较小部分，但结果是一样的。

我不确定我的理解是否错误并且我没有正确使用它或者其他地方是否存在问题，我假设我使用它错误但是我无法找到其他人创建的任何教程和示例令人惊讶。

我尝试将自己的类附加到诸如class="mat-display-1"似乎工作正常的项目中，但是如果我必须在整个应用程序的任何地方应用它，这似乎不是一个好的解决方案。

如果可能的话，我希望它可以在整个应用程序中应用，而不必单独为排版设置 100 个类。

我知道我可以按照这里的建议将其应用于我自己在 sass 中的元素，但我认为他们自己会这样做。

4

1 回答 1

18

这可能是由于与 sass 文件的顺序以及调用它们的函数有关的几个原因：

原因：

发生这种情况的原因是 Angular Material 的_theming.scss文件调用 sass mixins 的顺序，该文件可以在node_modules\@angular\material\_theming.scss.

麻烦 mixinmat-core和angular-material-typography.

使用主题：

当你创建一个主题并调用 Angular Material 的主题 mixinmat-core时，它包含了许多 mixin。

@mixin mat-core($typography-config: null) {
  @include angular-material-typography($typography-config);
  @include mat-ripple();
  @include cdk-a11y();
  @include cdk-overlay();
  @include cdk-text-field();
}

正如您在上面的代码片段中看到的那样，angular-material-typography确实调用了 mixin。当mat-core被调用时正在寻找排版配置，如果没有提供，它将使用默认配置。

使用排版：

当您仅使用排版文件时，通常会看到如下内容：

@import '~@angular/material/theming';

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

从上面的代码片段可以看出，我们创建了一个排版配置。以及我们称之为 Angular Material 的主题 mixin typography-configuration。这将为您设置排版，但是如果您同时使用 Angular 材质主题和 Angular 材质排版，您可能会遇到排版被覆盖的情况。这就是顺序的问题所在。

不正确的实施导致您的问题：

@import './_theme-master.scss';
@import './theme-typography';
@include mat-core();

例如上面的例子：假设在您的styles.scss文件中，您导入了一个主题文件，其中包含设置 aa 主题调色板并调用@include angular-material-theme($theme);. 在此之后，您决定导入您的排版文件。您的排版文件具有排版配置，并且您调用@include angular-material-typography($typography-configuration);传递您的配置。

现在，完成这些之后，您决定调用您的mat-core. 此时，您的样式是为您的排版创建的，并且您很高兴，但是，当调用mat-coreAngular 时，会使用默认的排版配置创建另一组样式。现在这些是最新的样式，因此您的样式会被创建的最新样式覆盖。

本质上，您的调用 mixin 如下所示：

@include angular-material-typography($typography-configuration);
@include mat-core();

要解决您的问题：

而是像这样加载您的排版配置：

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

现在解决创建许多排版样式并相互覆盖的问题。这很可能是由于多次导入文件（可能是包含您的字体的文件）导致 mixin 调用几次。尝试将您的排版文件放在 1 个中央空间中，例如调用文件一次styles.scss

于 2019-03-25T14:05:59.113 回答