能否在保留Angular Material全局主题的同时为特定组件应用自定义主题？

需求可行性确认 #

完全可行。Angular Material的主题系统原生支持针对单个组件覆盖全局主题样式，你的问题出在样式权重冲突和作用域未正确限定上。

解决建议 #

1. 给自定义主题添加专属作用域类 #

直接调用mat.form-field-theme($custom-formfield-theme)会和全局主题生成的样式权重持平，导致自定义样式被全局主题覆盖。你需要给目标组件添加一个自定义CSS类，将组件主题混合器包裹在该类选择器内，提升样式优先级：

// 先定义你的自定义表单字段主题
$custom-formfield-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$teal-palette),
      accent: mat.define-palette(mat.$pink-palette),
      warn: mat.define-palette(mat.$red-palette),
    ),
    // 可按需添加排版、密度配置
    typography: mat.define-typography-config(),
    density: 0,
  )
);

// 先应用全局主题
@include angular-material-theme($theme);

// 将自定义主题限定在专属类选择器内
.custom-form-field {
  @include mat.form-field-theme($custom-formfield-theme);
  // 若使用特定外观（如outline），需额外对应外观的主题混合器
  @include mat.form-field-outlined-theme($custom-formfield-theme);
}

然后在HTML中给需要自定义的mat-form-field添加该类：

<mat-form-field class="custom-form-field" appearance="outline">
  <mat-label>自定义主题输入框</mat-label>
  <input matInput placeholder="示例内容">
</mat-form-field>

2. 验证样式加载顺序 #

确保包含自定义主题的SCSS文件在全局主题文件之后加载，或者在同一个文件中自定义主题代码写在全局主题调用之后，避免自定义样式被提前加载的全局样式覆盖。

3. 针对性覆盖特定样式（可选） #

如果只需要修改组件的某一部分样式（比如标签颜色、边框颜色），无需完整应用组件主题，可直接针对具体元素使用颜色工具函数：

.custom-form-field {
  .mat-form-field-label {
    color: mat.get-color-from-palette(mat.$teal-palette, 700);
  }
  .mat-form-field-outline {
    color: mat.get-color-from-palette(mat.$pink-palette, 500);
  }
}

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