我正在尝试实现 Angular Material Typography,但是我遇到了一些困难,我不确定可能是什么问题。
我遵循了 Angular 提供的说明 here但是我遇到了问题。问题是应用程序中的所有内容看起来都受到了影响,但有些内容似乎被默认排版覆盖了,我不确定自己做错了什么。
排版的创建和使用
$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:工具栏
然而,对于垫子工具栏,我没有看到字体大小设置为 100 像素。在我看来,如下所示的默认字体大小覆盖了 100px 大小:
示例 #3:具有多个覆盖的不同工具栏
对于另一个工具栏上的最后一个例子,我们可以看到 100px 被添加了几次,每次都相互覆盖,直到最后一个覆盖也是 20px,所以字体大小不是 100px。
详情:
找到 Angular Material 指南 here表明我们有 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 多个类。
我知道我可以按照建议做 here for apply to my own elements in sass,但我认为他们自己做。
最佳答案
发生这种情况的原因可能与 sass 文件的顺序及其调用的函数有关:
原因:
发生这种情况的原因是由于 Angular Material 的 _theming.scss
文件调用 sass mixins 的顺序,该文件可以在 node_modules\@angular\material\_theming.scss
.
mixin 的问题在于 mat-core
以及 angular-material-typography
。
使用主题:
当您创建主题并调用 Angular Material 的主题混合 mat-core
时,它包含许多混合。
@mixin mat-core($typography-config: null) {
@include angular-material-typography($typography-config);
@include mat-ripple();
@include cdk-a11y();
@include cdk-overlay();
@include cdk-text-field();
}
正如您在上面的代码片段中看到的那样,angular-material-typography
mixin 确实被调用了。当调用 mat-core
时,它正在寻找排版配置,如果没有提供,它将使用默认配置。
使用排版:
当您只使用排版文件时,通常会看到如下内容:
@import '~@angular/material/theming';
$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);
正如您从上面的代码片段中看到的,我们创建了一个排版配置。以及我们调用 Angular Material 的主题混合 typography-configuration
。这将为您设置排版,但是如果您同时使用 Angular Material Theme 和 Angular Material Typography,您可能会遇到排版被覆盖的情况。这就是顺序的问题所在。
导致问题的不正确实现:
@import './_theme-master.scss';
@import './theme-typography';
@include mat-core();
例如上面的例子:假设在您的 styles.scss
文件中您导入了一个主题文件,其中包含设置一个主题调色板并调用 @include angular-material-theme($theme);
。在此之后,您决定导入排版文件。您的排版文件具有排版配置,您调用 @include angular-material-typography($typography-configuration);
将您的配置传入。
现在,在完成这些之后,您决定调用您的 mat-core
。此时您的样式已为您的排版创建,您很高兴,但是,当调用 mat-core
时,Angular 使用默认排版配置创建了另一组样式。现在这些是最新的样式,因此您的样式将被创建的最新样式覆盖。
本质上,您的调用 mixins 如下所示:
@include angular-material-typography($typography-configuration);
@include mat-core();
要解决您的问题:
而是像这样加载您的排版配置:
@include mat-core($typography-configuration);
现在讨论创建多个排版样式并相互覆盖的问题。
这很可能是由于一个文件(可能是包含您的排版的文件)被多次导入导致 mixin 调用几次。尝试将排版文件放在 1 个中央空间,就像在 styles.scss
关于Angular Material Typography 设置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55308073/