我正在尝试实施Angular Material Typography,但是我遇到了一些困难,不确定问题出在哪里。
我按照Angular这里提供的说明进行操作,但是遇到了一个问题。 问题是,似乎应用程序中的所有内容都受到影响,但有些被覆盖了,看起来像是默认的字体样式,而我不确定我做错了什么。
创建和使用的排版
$typography-configuration: mat-typography-config(
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(100px, 56px, 400),
$display-2: mat-typography-level(100px, 48px, 400),
$display-1: mat-typography-level(100px, 34px, 400),
$headline: mat-typography-level(100px, 32px, 400),
$title: mat-typography-level(100px, 32px, 500),
$subheading-2: mat-typography-level(100px, 28px, 400),
$subheading-1: mat-typography-level(100px, 24px, 400),
$body-2: mat-typography-level(100px, 24px, 500),
$body-1: mat-typography-level(100px, 22px, 400),
$caption: mat-typography-level(100px, 22px, 400),
$button: mat-typography-level(100px, 14px, 500),
$input: mat-typography-level(100px, 1.125, 400)
);
@include angular-material-typography($typography-configuration);
正如您所看到的,对于排版,我故意将第一个参数(字体大小)设置为100px
,以便我可以看到应用程序上的所有效果。
示例1:Material按钮
对于Angular Material按钮(在html元素'button'上使用'mat-button'),我看到了我期望看到的结果,如下所示。文本被设置为100px。
示例2:工具栏
然而,在Mat工具栏中,我没有看到字体大小设置为100px。在我的看法中,似乎默认的字体大小正在覆盖100px大小,如下所示:
示例3:具有多重覆盖的不同工具栏
对于另一个工具栏上的最后一个示例,我们可以看到100px被添加了几次,每次都会覆盖前面的设置,直到最后一个设置也是20px,因此字体大小不是100px。
详细信息:
Angular Material指南在这里给出了我们在应用程序中使用排版的3种方法:
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);
// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);
据我理解,我使用的第三个选项应该适用于任何使用了 class="mat-typography"
的地方。因此,我将其添加到应用程序的 body
中,并在 app-root
上尝试了一下。但是,如上所示,只有部分应用程序受到正确影响。我曾试图将其添加到组件中应用程序的较小部分,但结果仍然相同。
我不确定我的理解是否有误以及我是否使用不正确,还是其他地方存在问题,但我假设我使用不正确,但出奇地找不到其他人创建的任何教程和示例。
我尝试自己将类附加到项目中,例如
class="mat-display-1"
,这似乎可以正常工作,但如果我必须在整个应用程序中都应用它,这似乎不是一个好的解决方案。如果可能的话,我希望可以在整个应用程序中应用它,而不必为排版设置100多个类。
我知道我可以按照这里建议的方法在sass中应用于自己的元素,但我认为他们自己处理。