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

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

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

You can find a stackblitz example here

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

我只是:

  • 从角料网站上分析对话框示例 .

  • 添加自定义theme.scss(使用Roboto)并将其包含在angular-cli.json中

  • 删除style.css中的全局font-family

任何建议,解释?

回答(1)

3 years ago

在应用程序的某个位置,您需要将排版应用于应用程序页面主体,以便所有组件自动从中继承,包括保存对话框的叠加组件 . 在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() .