如何修改Angular Material按钮的内部波纹颜色并限制波纹范围？

你遇到的问题根源是重复添加了波纹指令：mat-raised-button组件本身已经内置了matRipple功能，当你手动在按钮上添加matRipple属性时，相当于在同一个元素上创建了两个独立的波纹实例——一个是按钮自带的（默认无边界），另一个是你手动配置的（有边界）。所以你看到的无边界波纹其实是组件自带的那个，而你自定义颜色的波纹可能被它覆盖或者同时显示。

修复步骤： #

• 移除按钮上手动添加的matRipple指令，保留组件自带的波纹配置属性即可。
• 确保[matRippleUnbounded]绑定为false（这也是默认值，显式写出更清晰）。

修正后的代码：

<button class="save-btn" mat-raised-button [matRippleColor]="rgba(255,255,0,0.3)" [matRippleUnbounded]="false">Save Changes</button>

额外检查项： #

如果还是出现波纹溢出的情况，检查你的自定义CSS是否修改了按钮的overflow属性。mat-raised-button默认会设置overflow: hidden来限制波纹范围，如果你的.save-btn类里写了overflow: visible之类的样式，会导致波纹溢出，需要把这个样式去掉或者改成overflow: hidden。

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