【发布时间】: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 排版级别的配置,这是默认使用的级别。
它会覆盖我尝试实现的配置。
我想知道我还能如何更改此工具栏元素的排版级别,如果任何其他 mixin 可以为我工作以使其工作?