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

Question

根据 Angular Material 排版，排版有 13 个定义级别：文档。

例如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');

2. 使用 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,
    )
);

3. 最后，你必须应用它们：

$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);