如何在自定义组件中使用Angular Material作用域主题？

核心思路：通过CSS变量传递主题配置 #

无需全局定义mixin或硬编码主题变量，只需将作用域主题的颜色暴露为CSS变量，让自定义组件自动读取父作用域的变量即可。

步骤1：在作用域主题中注入CSS变量 #

修改config.scss，在作用域类内添加主题颜色的CSS变量定义：

// config.scss
$my-special-theme: mat.define-light-theme((
  color: (
    primary: $my-primary-palette,
    accent: $my-accent-palette,
    warn: $my-warn-palette
  )
));

.my-scope {
  // 保留Material组件的作用域主题样式
  @include mat.button-color($my-special-theme);

  // 暴露主题颜色变量给后代组件
  --primary-main: #{mat.get-color-from-palette($my-special-theme.color.primary)};
  --primary-contrast: #{mat.get-color-from-palette($my-special-theme.color.primary, default-contrast)};
  --accent-main: #{mat.get-color-from-palette($my-special-theme.color.accent)};
  --warn-main: #{mat.get-color-from-palette($my-special-theme.color.warn)};
  // 按需添加更多色调（如500、A200等）
}

步骤2：自定义组件中使用CSS变量 #

在bar.component.scss里直接引用这些变量，无需显式引入主题配置：

// bar.component.scss
:host {
  background-color: var(--primary-main, #3f51b5); // 带默认值兼容无作用域场景
  color: var(--primary-contrast, #ffffff);
}

// 组件内嵌套的Material组件无需额外加类，只要父容器带.my-scope就会自动继承主题

步骤3：简化模板代码 #

现在可以移除<app-bar>上的my-scope类，只要它处于.my-scope容器内，就能自动读取CSS变量：

<!-- container.component.html -->
<section class="my-scope">
  <button mat-button color="primary">Foo</button>
  <app-bar></app-bar> <!-- 无需加my-scope类 -->
</section>

进阶：批量注入全量主题变量 #

如果需要使用主题的所有色调（如primary-50、accent-A100等），可以用循环批量生成变量：

// config.scss
.my-scope {
  @include mat.all-component-colors($my-special-theme);

  // 批量生成所有颜色变量
  @each $color-group, $palette in mat.get-color-config($my-special-theme) {
    @each $shade, $color in $palette {
      --#{$color-group}-#{$shade}: #{$color};
    }
  }
}

之后自定义组件可以灵活使用--primary-500、--accent-A200这类变量。

内容的提问来源于stack exchange，提问作者z0r