Angular Material v17：主题颜色的组件应用及自定义主题方法

一、先搞懂组件颜色的映射逻辑 #

Angular Material基于MDC（Material Design Components）构建，组件的颜色不是固定值，而是通过主题调色板和组件专属颜色变量绑定生成的。比如你提到的filled输入框背景色，默认是从主题的surface调色板取色，最终通过CSS自定义属性--mdc-filled-text-field-container-color应用到组件上。

这个自定义属性的值不是硬编码的，是在主题编译过程中，根据你定义的调色板自动计算出来的。

二、官方推荐的定制步骤（完全不用::ng-deep） #

1. 先定义自己的调色板 #

基于Material自带的调色板，定制符合需求的色彩组：

// 引入Material的SCSS工具
@use '@angular/material' as mat;

// 自定义调色板：主色、强调色、警告色、表面色
$my-primary: mat.define-palette(mat.$blue-palette, 500, 300, 700);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);
$my-surface: mat.define-palette(mat.$gray-palette, 50); // 这个surface色会影响输入框背景这类容器区域

2. 生成全局自定义主题 #

用mat.define-light-theme或mat.define-dark-theme把调色板组合成完整主题：

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
    surface: $my-surface, // 全局设置surface色，所有依赖surface的组件都会生效
  )
));

3. 单独微调单个组件的颜色 #

如果不想改全局surface色，只想调整filled输入框的背景，直接用官方提供的组件主题混合器精准覆盖：

// 先初始化Material核心样式
@include mat.core();
// 给所有组件应用全局主题
@include mat.all-component-themes($my-theme);

// 单独修改filled样式的mat-form-field背景色
@include mat.form-field-theme($my-theme);
@include mat.form-field-color((
  container-color: mat.get-color-from-palette($my-primary, 100), // 直接指定从主色调色板取100号色
), $my-theme);

这种方式是官方认可的，不会污染其他组件，完全不需要用::ng-deep。

三、怎么知道调色板颜色对应组件的哪个部分？ #

• 查组件的主题文档：每个Material组件的官方文档都有「Theming」章节，里面会明确标注哪些颜色属性对应组件的具体区域（比如form-field的container-color就对应输入框背景）。
• 看组件的SCSS源码：直接看@angular/material包下对应组件的主题文件（比如form-field/_form-field-theme.scss），里面会写清楚每个颜色属性对应的调色板来源，比如filled输入框的默认背景就是从主题的surface.default取色。
• 浏览器调试追踪：在开发者工具里查看--mdc-filled-text-field-container-color的计算值，往上溯源就能看到它是由主题混合器生成的样式规则注入的。

四、关于--mdc-filled-text-field-container-color的设置位置 #

这个变量是动态生成的，不是写在某个固定CSS文件里。当你使用mat.form-field-theme这类混合器时，SCSS会根据你传入的主题参数，自动计算颜色值，然后生成对应的CSS规则，把变量注入到组件的类选择器下，比如：

.mat-mdc-form-field.mat-mdc-form-field-appearance-fill .mdc-text-field--filled {
  --mdc-filled-text-field-container-color: #e3f2fd; /* 这个值来自你定义的surface或自定义的container-color */
}

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