Angular Material mat-ripple失效及matRippleColor绑定报错问题

我之前也踩过一模一样的坑，结合你提到的「其他页面已正常启用波纹效果、已经导入MatRippleModule」的细节，可以从这几个关键点排查修复：

1. 确认当前组件所在模块已导入MatRippleModule #

Angular的模块是独立封装的，哪怕根模块或者其他功能模块导入了MatRippleModule，当前组件所属的NgModule也必须单独导入它。打开你这个按钮所在组件的模块文件（比如对应组件的xxx.module.ts），检查imports数组里是否包含MatRippleModule：

import { MatRippleModule } from '@angular/material/core';

@NgModule({
  imports: [
    // ...其他已导入的模块
    MatRippleModule
  ],
  declarations: [YourTargetComponent]
})
export class YourModule { }

2. 修复matRipple无效果的样式问题 #

matRipple需要父元素具备相对定位，且设置overflow: hidden才能正常显示波纹（否则波纹可能溢出到按钮外，或者被其他元素遮挡）。给你的按钮添加以下样式：

.submit-button {
  position: relative;
  overflow: hidden;
  /* 保留你的其他原有样式 */
}

3. 修正matRippleColor绑定报错的问题 #

你遇到的Can't bind to 'matRippleColor' since it isn't a known property of 'button'报错，大概率是绑定语法错误：

• 如果你想直接设置静态颜色值（比如white），不需要加方括号[]，直接写matRippleColor="white"即可；
• 如果要用组件类里的变量绑定颜色，才需要方括号，但要确保变量已定义，比如在组件.ts文件里：

  rippleColor = 'white'; // 也可以用十六进制值 '#ffffff'
  

  然后HTML里写[matRippleColor]="rippleColor"

修正后的按钮代码示例：

<button matRipple class="submit-button" color="accent" type="submit" matRippleColor="white">
  <mat-icon>search</mat-icon>
  <span>Szukaj</span>
</button>

另外，也可以通过CSS变量直接控制波纹颜色，这种方式有时候更灵活：

.submit-button {
  --mdc-ripple-color: white;
}

按照上面的步骤依次排查，应该就能解决你的波纹无效果和报错问题啦！

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