单击垫子按钮时如何更改背景颜色 - Angular？答案

【问题标题】：How to change the background colour when the mat-button is clicked - Angular?单击垫子按钮时如何更改背景颜色 - Angular？
【发布时间】：2021-03-10 15:24:47
【问题描述】：

例如：https://material.angular.io/components/button/overview 当我点击这些按钮中的任何一个时，按钮上都会添加一个灰色背景效果。

我已经尝试过 ngdeep 并针对 mat 按钮的状态，例如焦点和活动。但是，即使使用红色等背景颜色，我仍然可以看到灰色，而在白色背景下，灰色仍然存在。

【问题讨论】：

你能截图按钮的行为吗？
这能回答你的问题吗？ stackoverflow.com/questions/52962829/…
@SarahCox 感谢您的链接，但我尝试了这些选项，但没有成功
@Gintoki 抱歉，这对您不起作用。不过，我很高兴 Nirmalya Roy 可以为您提供一个很好的解决方案！

标签： angular angular-material

【解决方案1】：

您可以使用 disableRipple 为 true 来关闭材质按钮的波纹效果。这样灰色背景效果就不会在点击按钮时出现。

<button mat-raised-button [disableRipple]="true">Basic</button>

您需要在根module.ts文件中添加以下配置

const globalRippleConfig: RippleGlobalOptions = {
  disabled: true,
  animation: {
    enterDuration: 300,
    exitDuration: 0
  }
};

@NgModule({
  providers: [
    {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig}
  ]
})

在这里查看详细链接

https://stackblitz.com/edit/angular-xvbzzq-yhgy5c?file=src/app/material-module.ts

【讨论】：

行得通！谢谢！你知道是否可以在css中更改它？我的项目中已经有很多垫子按钮了。
根据材料角度文档，这是唯一的方法。如果这个答案是正确的，请让这个答案正确。
请检查我修改后的答案。通过这种方式，您实际上可以消除整个项目的涟漪。