首页 文章

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

提问于
浏览 次
0

我正在使用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

任何建议，解释？

css angular angular-material

1 回答

  • 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() .

    回复于

相关问题