gpt4 book ai didi

css - 对话框、 snackbar 、...entryComponents 上的 Angular Material 自定义主题

转载 作者:行者123 更新时间:2023-11-28 14:57:15 25 4
gpt4 key购买 nike

我正在使用 Angular & Material v6,我对自定义主题在 entryComponents(如对话框或 snackbar )上的应用有疑问。

实际上,我使用 Material 的自定义主题将 Roboto 字体放在所有组件上,但它没有应用于我的对话框或 snackbar 。

You can find a stackblitz example here

如您所见,Roboto 字体已正确应用到我的页面上,但如果您打开对话框,则会改用 Time New Roman...

我只是:

  • 从 Angular Material 网站上 fork 对话示例。
  • 添加自定义 theme.scss(使用 Roboto)并将其包含在 angular-cli.json 中
  • 删除 style.css 中的全局字体系列

任何建议,解释?

最佳答案

在您的应用程序中的某个地方,您需要将排版应用到应用程序页面主体,以便所有组件自动从它继承,包括包含对话框的覆盖组件。在 stackblitz 演示中,您将其注释掉以测试您的排版:

body { 
/* font-family: Roboto, Arial, sans-serif; */
margin: 0;
}

所以你要么需要在你的主题文件中用类似的东西替换它:

body {
font-family: mat-font-family($custom-typography);
margin: 0;
}

或者(使用 stackblitz 时不能这样做)在 index.html 主页面中使用 Angular Material 排版类:

<body class="mat-typography">
...
</body>

此外,您的排版配置需要为 Angular Material 使用的所有排版级别定义尺寸和粗细。一种简单修改默认配置的简单方法是使用 SASS 合并。例如:

$custom-typography: map-merge(
mat-typography-config(),
mat-typography-config(
$font-family: 'Roboto, sans-serif'
)
);

这会采用您的定义并将它们写入默认配置,保留您没有重新定义的任何内容。

您只需要单独调用 mat-core(),因为它会调用 angular-material-typography(),后者又会调用 mat-base -typography().

关于css - 对话框、 snackbar 、...entryComponents 上的 Angular Material 自定义主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50762176/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com