css - 如何为所有标记元素使用 Angular 主题？

Question

是否可以对文本和其他 HTML 元素(例如文本、标题、链接等)使用 Angular Material 主题？

我想使用如下内容:

<h2 color="'primary'">Text to be colored</h2>

我一直在搜索并找到了这个帖子，例如Get Material 2 theme color scheme/palette for other elements , 但它似乎太多了，我也不同意只使用 scss 文件而不是 css。

有没有更简单的方法来实现这一点？例如为 theme.scss 中的其他元素添加额外的定义？

Answer 1

您可以使用类来设置样式中的颜色:

<h2 class="app-primary">Primary</h2>

此方法假定您有一个自定义主题:

$app-primary: mat-palette($mat-indigo);
// ...

.app-primary {
    color: mat-color($app-primary);
}

或者:

.app-primary {
    /* Insert hard-coded value here */
    color: #3F51B5;
}