Angular Material 字体排版未正确设置

Question

Angular Material 字体排版未正确设置

angularsassangular-materialtypographyangular-material-theming

12

我正在尝试实施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：Material按钮

对于Angular Material按钮（在html元素'button'上使用'mat-button'），我看到了我期望看到的结果，如下所示。文本被设置为100px。

示例2：工具栏

然而，在Mat工具栏中，我没有看到字体大小设置为100px。在我的看法中，似乎默认的字体大小正在覆盖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中应用于自己的元素，但我认为他们自己处理。

- L1ghtk3ira

2个回答

1

对于跟在ngV14之后的任何人，这是你需要做的事情，以及@L1ghtk3ira的答案：

稍作更正，因为在ngV14之后，@include mat.core($typography);将不起作用，所以你需要确保它是这样的@include mat.core();。

请在你的主题声明之后添加以下行：@include mat.typography-hierarchy($theme);

尽管他们没有更新他们的文档，但在GitHub的问题部分提到了这一点。这是给你的链接：Github问题页面。

在v15中，默认不再包含排版层次结构。你需要使用@include mat.typography-hierarchy($theme);自己添加它。

所以你需要做类似这样的事情：

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$my-warn: mat.define-palette(mat.$red-palette);

$my-typography: mat.define-typography-config();


// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: $my-typography
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($my-theme);
@include mat.typography-hierarchy($my-theme);

愉快的编码 :D

- AlokeT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- L1ghtk3ira · Accepted Answer

这可能是由于SASS文件的顺序以及它们被调用的函数有些原因导致的:

原因:

发生这种情况的原因是由于Angular Material的_theming.scss文件调用了Sass mixin的顺序不当，该文件可以在node_modules\@angular\material\_theming.scss中找到。

问题在于mixin mat-core和angular-material-typography。

使用主题:

当您创建一个主题并调用Angular Material的主题mixin mat-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的主题混合器typography-configuration。这将为您设置并确实设置排版，但是如果您同时使用Angular Material主题和Angular Material排版，则可能会出现覆盖您排版的情况。这就是顺序问题所在。

由于不正确的实现而导致您的问题：

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

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

现在，在这些操作完成后，您决定调用mat-core。此时，您的样式已经为您的排版创建完毕，您感到很满意。但是，当调用mat-core时，Angular会使用默认的排版配置创建另一组样式。现在，这些是最新的样式，因此您的样式会被新创建的样式覆盖。 实质上，您的调用mixin看起来像这样：

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

解决方法：

不要像这样加载你的字体配置：

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

现在来讨论一下创建过多的字体样式并相互覆盖的问题。这很可能是由于某个文件（可能是包含您的排版的文件）被多次导入，导致mixin被多次调用所致。试着将您的排版文件放在一个中心位置，例如在styles.scss中只调用一次该文件。