Angular Material自定义主题后点击组件出现异常灰色区域求解决方案

这个灰色区域本质是MDC组件的涟漪（Ripple）效果默认样式，自定义主题时没正确覆盖涟漪颜色配置，导致默认灰色显现。以下是具体解决思路：

1. 优先通过主题系统统一配置（合规且易维护） #

Angular Material的MDC组件涟漪颜色应该通过主题SCSS文件全局配置，这是官方推荐的规范方式，能保证所有组件样式统一：

@use '@angular/material' as mat;

// 定义你的主题色板
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-theme: mat.define-light-theme((
  color: (primary: $my-primary, accent: $my-accent)
));

// 针对各组件配置涟漪颜色
@include mat.mdc-button-theme($my-theme, (
  ripple-color: mat.get-color-from-palette($my-primary, 200, 0.3) // 带透明度的主题色
));

@include mat.mdc-checkbox-theme($my-theme, (
  ripple-color: mat.get-color-from-palette($my-accent, 200, 0.3)
));

@include mat.mdc-chip-theme($my-theme, (
  ripple-color: rgba(0,0,0,0.1) // 也可直接用rgba自定义
));

2. 全局禁用/统一修改涟漪（无需涟漪效果时用） #

如果项目不需要涟漪效果，可全局覆盖MDC的基础涟漪样式：

// 全局禁用所有MDC组件涟漪
.mdc-ripple-surface {
  --mdc-ripple-color: transparent !important;
}

// 或统一设置自定义涟漪色
.mdc-ripple-surface {
  --mdc-ripple-color: rgba(你的颜色值, 透明度) !important;
}

3. 关于你当前方案的合规性 #

你用--mat-mdc-button-ripple-color: none修复按钮是可行的，但属于局部样式硬改，不属于官方主题配置的标准流程。临时修复单个组件没问题，但长期维护建议用主题系统统一配置，避免后续主题变更时出现样式不一致。

4. 其他组件的针对性修复 #

复选框、芯片等组件也有对应的专属涟漪CSS变量，可通过浏览器开发者工具查看元素样式找到，然后针对性设置：

// 修复复选框异常涟漪
.mat-mdc-checkbox {
  --mat-mdc-checkbox-ripple-color: transparent;
}

// 修复芯片异常涟漪
.mat-mdc-chip {
  --mat-mdc-chip-ripple-color: rgba(255,255,255,0.2);
}

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