Angular 材质 - 定义自定义排版级别

Question

对于我的项目，Angular 材质排版有 13 个排版级别（显示 4、显示 3、显示 2、显示 1、标题等），我需要添加更多级别。 我试过按照这个例子，但我不能让它工作。 我的代码如下（我使用的是角度和材料的版本 12）：

_typography.scss

@use "~@angular/material" as mat;
@use "sass:map";
@use "../components/card-theme" as card;

$detail-typography-level: mat.define-typography-level(10px, 20px, 300);

$typography-config: map.merge(
  mat.define-typography-config(
    $font-family: 'Inter, Roboto, "Helvetica Neue", sans-serif',
    $display-4: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
    $display-3: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
    $display-2: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
    $display-1: mat.define-typography-level(34px, 40px, 400),
    $headline: mat.define-typography-level(25px, 30px, 200, $letter-spacing: 0.1px),
    $title: mat.define-typography-level(20px, 27px, 400),
    $subheading-1: mat.define-typography-level(15px, 17px, 400),
    $subheading-2: mat.define-typography-level(16px, 21px, 500),
    $body-1: mat.define-typography-level(18px, 35px, 300, $letter-spacing: 1.29354px),
    $body-2: mat.define-typography-level(18px, 25px, 500, $letter-spacing: 1.29354px),
    $caption: mat.define-typography-level(14px, 25px, 400),
    $button: mat.define-typography-level(14px, 21px, 400),
    $input: mat.define-typography-level(inherit, 1.125, 400),
  ),
  (
    'detail': $detail-typography-level,
  )
);

@include mat.typography-level($typography-config, 'detail');

@include mat.core($typography-config);
@include card.typography($typography-config);

_card-theme.scss

@use "sass:map";
@use "@angular/material" as mat;

@mixin typography($config) {
  $typography-config: mat.get-typography-config($config);

  .card-header-detail{    
    font-size: mat.font-size($typography-config, "detail");
    font-weight: mat.font-weight($typography-config, "detail");
    line-height: mat.line-height($typography-config, "detail");
    letter-spacing: mat.letter-spacing($typography-config, "detail");
  }
}