对话框、快餐栏、...entryComponents 上的 Angular Material 自定义主题答案

【问题标题】：Angular Material custom theme on dialog, snackbar,...entryComponents对话框、快餐栏、...entryComponents 上的 Angular Material 自定义主题
【发布时间】：2018-06-08 13:51:59
【问题描述】：

我正在使用 Angular & Material v6，我有一个关于在 entryComponents （如对话框或小吃店）上应用自定义主题的问题。

实际上，我使用材料的自定义主题将 Roboto 字体放在所有组件上，但它没有应用于我的对话框或快餐栏。

You can find a stackblitz example here

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

我只是：

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

有什么建议、解释吗？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

您需要在应用程序的某个地方将排版应用到应用程序页面主体，以便所有组件自动继承它，包括包含对话框的覆盖组件。在 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()。

【讨论】：