Question

我正在使用Angular＆amp;材料v6和我有一个关于在entryComponents（如对话框或小吃店）上应用自定义主题的问题。

实际上，我使用材质的自定义主题将Roboto字体放在所有组件上，但它不适用于我的对话框或小吃店。

正如您所看到的，Roboto字体已正确应用于我的页面，但如果您打开对话框，则会使用Time New Roman代替...

我只是：

有任何建议，解释吗？

Answer 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()。