自定义排版不适用答案

【问题标题】：custom typography does not apply自定义排版不适用
【发布时间】：2022-12-21 08:46:51
【问题描述】：

我正在我的角度应用程序中实现我自己的排版主题，我试图复制反应 mui 中排版组件附带的默认配置。目前我已经定义了角度材料主题定制指南版本 15.0.1 中指定的所有排版级别，并且它们也已经按照文档中指定的方式分组在排版配置变量中。

$typography-global-config: mat.define-typography-config(   $font-family: "Roboto",   /*this is a h1*/ $headline-5:
    mat.define-typography-level(
      $font-family: Nunito,
      $font-weight: 300,
      $font-size: 6rem,
      $line-height: 1.1167,
      $letter-spacing: -0.01562em,
    ),   /*healdine-6 is a h2*/ $headline-6:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 300,
      $font-size: 3.75rem,
      $line-height: 1.2,
      $letter-spacing: -0.008833em,
    ),   /*subtitle-1 is a h3*/ $subtitle-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.75,
      $letter-spacing: 0.00938em,
    ),
       /*subtitle-2 is a h4*/ $subtitle-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.57,
      $letter-spacing: 0.00714em,
    ),

  $body-1:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.875rem,
      $line-height: 1.5,
      $letter-spacing: 0.001071em,
    ),   $body-2:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 1rem,
      $line-height: 1.5,
      $letter-spacing: 0.00938em,
    ),   $caption:
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 400,
      $font-size: 0.75rem,
      $line-height: 1.66,
      $letter-spacing: 0.03333em,
    ),    $button:  
    mat.define-typography-level(
      $font-family: Roboto,
      $font-weight: 500,
      $font-size: 0.875rem,
      $line-height: 1.75,
      $letter-spacing: 0.02857em,
    ), );

当我尝试更改标题 6 的工具栏组件的默认字体级别并且我想将其更改为副标题 2 时，我的问题就出现了。

我调用此组件附带的默认类并调用 mat.typography-level mixin 我尝试对其进行配置。

.mat-toolbar{   @include mat.typography-level($typography-global-config, 'subtitle-2'); }

初始化应用程序时，工具栏元素仍然具有 headline-6 排版级别的配置，这是默认使用的级别。

enter image description here

它会覆盖我尝试实现的配置。

enter image description here

我想知道我还能如何更改此工具栏元素的排版级别，如果任何其他 mixin 可以为我工作以使其工作？

【问题讨论】：

标签： angular-material angular-components typography scss-mixins theming

【解决方案1】：

目前，Angular 没有提供这样的工具来配置你自己的排版级别。

但是有一个后门，可以让您找到解决方案。

您需要做的就是创建一个包含您的排版的 SCSS 映射，然后将其合并到默认的 Angular 排版级别。

可以参考This solution。

【讨论】：