如何更改垫子按钮背景颜色并保持颜色淡化

Question

我正在尝试更改 angular 材质mat-button的背景颜色，如使用background-color: red; 这个stackblitz 示例所示。 在 hover 上仅适用于mat-raised-button ，当应用于mat-button时，它会消除背景颜色的淡入。

如何在保持渐变 animation 的同时更改背景颜色？

Answer 1

我不知道 angular 材料是否提供了允许 mat-button 进行颜色阴影过渡的配置。 但是，您可以使用一条 css 线轻松完成：

[mat-button] {
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

这是更新的stackblitz： https://stackblitz.com/edit/angular-xf75rm-77tuxf?file=src/app/button-types-example.scss

Answer 2

styles按钮是封装的，所以你必须使用/deep/选择器来改变内部styles。

尝试这个：

.link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}