是否有一个网站可以将 Angular Material 组件映射到其 CSS 变量？

Question

我想设置 Angular Material 组件的样式并使用 CSS 变量自定义它们。

但是，识别影响所需样式的特定 CSS 变量具有挑战性。

有没有一种方法可以直观地显示每个组件以及相应的 CSS 变量及其应用范围？

或者是否有其他方法来检查元素并仅查看它使用的 CSS 变量？

Answer 1

自 Angular Material v19 起，自定义组件主题的推荐方法是使用 SCSS 覆盖 mixins。这些 mixin 和可能的覆盖在官方文档的“样式”选项卡中可见。例如，如果您想覆盖卡片副标题的颜色，您可以检查 card style docs 并使用以下 mixin：

@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.card-overrides((
    subtitle-text-color: orange,
  ));
}