- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试实现 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
,这样我就可以查看应用程序上的所有内容是否都受到影响。
对于 Angular Material 按钮(在 html 元素“button”上使用“mat-button”),我看到了我所期望的,如下所示。文本设置为 100px。
然而,对于垫子工具栏,我没有看到字体大小设置为 100 像素。在我看来,如下所示的默认字体大小覆盖了 100px 大小:
对于另一个工具栏上的最后一个例子,我们可以看到 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/
我正在使用 Gatsby.js和它的 Typography带有 Irving theme 的插件. 此主题需要 Google 字体 "Exo"和 "Yrsa" ,并将导入添加到 导出的静态 html
我正在使用 FontForge 从 SVG 文件创建 ttf 字体。但是基线都是错误的,我无法理解如何从 FontForge 命令行脚本工具设置基线。 有什么想法吗? 最佳答案 基线是“em 正方形”
我正在尝试实现 Angular Material Typography,但是我遇到了一些困难,我不确定可能是什么问题。 我遵循了 Angular 提供的说明 here但是我遇到了问题。问题是应用程序中
CSS 规范指出,行高应通过将指定值除以二并将结果应用到文本行的上方和下方来应用于文本。 这与对行距的传统理解有很大不同,这通常意味着间距仅在文本行上方“添加”。 (我知道这不是 100% 正确,因为
智能舍入一直是 knitr 的一大特色,可以避免很多 sprintf/round/paste0 走弯路。 在一位客户提示我给出了错误的小数点后,我注意到忘记 $$ 对于可能以科学计数法打印的数字是非常
所有这些文字看起来都是一样的,但是我试图让它们看起来不同。我想要小写的文字。我想让小型大写字母排版效果发挥作用的地方是什么? 要重现此问题,请打开Visual Studio 2008,执行"file"
Material UI 中的默认 Typography 将下一个标记元素移动到新行上。当下一个组件在同一行时如何自定义此组件? 我使用this组件。 最佳答案 无需覆盖样式,只需应用 inline 属
现在,我正在使用This For Elementor Control。 我尝试了近10次,但是没有用。 有人请帮助我。我不知道为什么它不起作用。其他控件工作正常。都准备好了。只有版式控件不起作用。
我发现一些 Google Webfonts 现在使用 WOFF 2.0。我可以以某种方式将现有的 WOFF 字体转换为这种新的(据说是更好的格式)吗?又如何? 最佳答案 当然!您可以将现有的 woff
Bootstrap Example
我正在使用 组件显示列表中某些项目的描述。我想将描述中的行数限制为 2。 现在我可以使用 ellipsis 的 Prop 将描述限制为仅显示 2 行并将其设置为可扩展。但是,我似乎无法找到一种方法将
我正在尝试material-ui,所以我创建了两个主题: const darkTheme = createMuiTheme({ palette: { type: "dark" } })
我正在使用 Material-UI,但我有点困惑。有组件Typography但我不太明白何时使用它以及它的目的是什么。 什么时候应该使用Typography?它可以解决/帮助什么问题,或者如果我在开发
这个问题已经有答案了: How to make Material UI Typography without newline? (6 个回答) 已关闭 1 年前。 我想对我的文本应用两个不同的版式标签
我正在使用 ReactJS 和名为 MaterialUI 的组件库。我在使用 Typography 组件时遇到问题。 发生的情况是,如果我写一个长文本,它会超出其容器并且不会换行: import Re
是否可以转换 Material UI 元素 Sign in 进入样式组件? 我尝试使用此方法进行排版,但文本似乎小得多。 export const Typo
我有两个带有默认变体和标题变体的 Typography 元素。我如何使用 align="center" 属性将内容居中,并将变体作为标题,因为这似乎不起作用。 render() { ret
我有两个带有默认变体和标题变体的 Typography 元素。我如何使用 align="center" 属性将内容居中,并将变体作为标题,因为这似乎不起作用。 render() { ret
我在这里找不到示例网站中演示的 css 类: https://material.angularjs.org/#/CSS/typography 我安装了 bower angular-material,我
我在一个网站上工作,其中包含来自 typography.com 的字体。 字体的必要文件包含在 css 导入中: @import 'https://cloud.typography.com/67417
我是一名优秀的程序员,十分优秀!