角材料的版式设置不正确

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元素“ button”上的“ mat-button”），我看到了预期的效果，如下所示。文字设置为100px。

示例2：工具栏

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

示例3：具有多个覆盖的其他工具栏

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

详细信息：

发现here的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上进行了尝试。但是，正如我们在上面看到的，只有部分应用程序受到了正确影响。

我尝试将其添加到组件中应用程序中较小的部分，但结果却相同。

我不确定我的理解是错误的，还是没有正确使用它，或者其他地方是否有问题，我假设我使用的是错误的，但是我找不到其他人创建的任何教程和示例。 / p>

我尝试将类自己附加到诸如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主题和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使用默认的排版配置创建了另一组样式。现在这些是最新样式，因此您的样式将被创建的最新样式覆盖。

基本上，您的呼叫混合器如下所示：

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

要解决您的问题，

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

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

现在要解决的问题是要创建许多印刷样式并相互替代。 这很可能是由于多次导入文件（可能是包含排版的文件）导致Mixin调用了几次。尝试将排版文件放在1个中央空间中，例如在styles.scss

中调用一次