获取角度材质排版样式

Question

如何在 Angular Material v16 中的自定义组件中获取排版级别样式？

我们以前可以把这个写在component.scss中

@import '~@angular/material/theming';
$config: mat-typography-config();
.unicorn-title {
  @include mat-typography-level-to-styles($config, title);
}

当前的等价物是多少？

Answer 1

我通常会创建一个配置文件，例如typography.scss，来定义 Angular Material 的所有排版设置。

@use "@angular/material" as mat;

$erp-typography: mat.define-typography-config(
    $font-family: 'Montserrat, Arial, Helvetica, sans-serif',
    $headline-1: mat.define-typography-level(2.4rem, 2.8rem, 400, 'Oswald, Impact, Charcoal, sans-serif'),
    $headline-2: mat.define-typography-level(2rem, 2.4rem, 400, 'Oswald, Impact, Charcoal, sans-serif'),
    $headline-3: mat.define-typography-level(1.6rem, 2rem, 700),
    $headline-4: mat.define-typography-level(1.6rem, 2rem, 400),
    $headline-5: mat.define-typography-level(2.4rem, 2.8rem, 400, 'Oswald, Impact, Charcoal, sans-serif'),
    $headline-6: mat.define-typography-level(2rem, 2.4rem, 400, 'Oswald, Impact, Charcoal, sans-serif'),
    $subtitle-1: mat.define-typography-level(1.6rem, 2rem, 700),
    $subtitle-2: mat.define-typography-level(1.6rem, 2rem, 400),
    $body-1: mat.define-typography-level(1.6rem, 2rem, 400),
    $body-2: mat.define-typography-level(1.6rem, 2rem, 400),
    $caption: mat.define-typography-level(1.2rem, 2rem, 400),
    $button: mat.define-typography-level(1.4rem, 1.4rem, 500),
    $overline: mat.define-typography-level(1.4rem, 1.4rem, 500),
);

每个参数，如headline-1、subtitle-1等，在Material Documentation中有详细说明。 [https://material.angular.io/guide/typography][1]

[1]：排版级别

最后，您需要在自定义主题或主 SCSS 文件中包含整个排版配置：

@use './theming/typography' as typo;
@include mat.all-component-typographies(typo.$typography);

我希望这对您有所帮助或为您指明正确的方向。