角度材料排版未正确设置

Question

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

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

排版创建和使用

$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元素'按钮'上的'mat-button'），我看到了我的预期，如下所示。文本设置为100px。

示例＃2：工具栏

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

示例＃3：具有多重覆盖的不同工具栏

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

细节：

角度材料指南发现here表明我们有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个类。

我知道我可以做什么建议here适用于我自己的元素sass，但我认为他们自己做。

Answer 1

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

原因：

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

混乱的问题是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 Theme和Angular Material Typography，则可以使用您的排版被覆盖的情况。这就是订单的问题所在。

导致您的问题的执行错误：

@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会使用默认排版配置创建另一组样式。现在这些是最新的款式，因此你的款式会被最新款式所覆盖。

基本上你的调用mixins看起来像这样：

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

要解决您的问题：

而是加载您的排版配置，如下所示：

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

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