我们可以在 Angular 材质排版中定义自定义的排版级别吗

Question

根据角度材料排版，有 13 个定义的排版级别：Documentation。

例如display-4、display-3、display-2、标题、标题等

默认情况下，这些级别有一些预定义的字体大小、行高和字母间距。 我们可以为每个级别自定义字体如下：

@import '~@angular/material/theming';

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
  $font-family: 'Roboto, monospace',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
  $caption: mat-typography-level(10px, 16px, 400),
);

// Override the typography in the core CSS.
@include mat-core($custom-typography);

例如，如果我的项目样式指南中有标题大级别，我如何将该级别添加到自定义功能？

我可以通过定义自己的 CSS 类来做到这一点，但是有没有什么复杂的方法可以做到这一点？

Answer 1

你不能用 Angular 开箱即用地做到这一点。您需要两个步骤。

1. 定义一个新级别。就我而言，它是标签

$label: mat.define-typography-level(20px, 27px, 400, $font-family: 'Roboto, "Helvetica Neue", sans-serif');

1. 将此关卡与 sass "map.merge ()" 合并到现有配置中。

$typography-config: map.merge(
    mat.define-typography-config(
        $font-family: '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(20px, 27px, 500),
        $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(16px, 21px, 400),
        $body-2: mat.define-typography-level(16px, 25px, 500),
        $caption: mat.define-typography-level(14px, 21px, 400),
        $button: mat.define-typography-level(16px, 21px, 400),
        $input: mat.define-typography-level(inherit, 1.125, 400),
    ),
    (
        "label": $label,
    )
);

1. 最后你必须应用它们

$app-theme: mat.define-light-theme(
    (
        typography: $typography-config,
    )
);
@include mat.all-component-typographies($typography-config);

这些可以像这样使用

@mixin typography($theme) {
    $typography-config: mat.get-typography-config($theme);
    
    .mat-form-field-appearance-legacy .mat-form-field-label {
        @include mat.typography-level($typography-config, 'label');
    }
}
@include typography($app-theme);