我是否需要为每个想要使用活动 Material 主题中的设置的 Angular 组件自定义 mixin？

Question

我想回答的问题：

1. 我们是否需要为每个组件添加 mixins 以连接到 Angular Material 主题并包含？
2. 如果是这样，我们应该如何构建我们的文件夹？将主题 scss 文件与组件 scss 文件放在一起？或者在单独的“mixins”文件夹中
3. 有更好的方法吗？

Angular Material 文档有一个关于如何主题化您自己的自定义组件的示例： https://material.angular.io/guide/theming-your-components

我们需要为每个想要读取主题值的组件执行此操作吗？

例如，我们的标题需要重音 200 颜色，因此这意味着我们采用标题组件 scss 文件，大部分复制它并将其转换为 mixin（根据材质文档）。

然后我们必须在应用程序中包含此组件混合（请参阅步骤＃4：https://material.angular.io/guide/theming-your-components#step-4-include-the-theme-mixin-in -您的应用程序）。

仅仅获取单个颜色值感觉需要很大的开销。我见过人们阅读 Material 主题值，然后将它们分配给 root 下的 CSS 变量，然后他们可以访问这些颜色组件样式表，但这感觉很hacky。

Answer 1

无需为每个组件更改主题。最好在文件上定义自定义主题，然后在 style.scss 中使用它