角垫按钮：悬停背景颜色有效，如果我使用白色以外的颜色

Question

尝试为我的 Angular mat-button 上的 :hover 状态设置自定义背景颜色

这里是html： <button mat-button class="my-mat-button">Click</button>

然后我的 css 在我的styles.sass

.my-mat-button:hover
  background-color: red !important

这可以将悬停状态更改为红色。

但是当我将 css 更改为

.my-mat-button:hover
  background-color: white !important

这导致悬停状态为灰色。

Answer 1

按钮背景颜色按预期工作，而且您的代码也都是正确的。
我在stackblitz 中重建您的问题。如果您查看“警告”按钮，您可以看到背景颜色正在工作。

我认为问题在于按钮的不透明度在悬停时会发生变化。 我在角度材料代码中搜索，发现了这个：

// Only basic and stroked buttons (not raised, FABs or icon buttons) have a hover 
style.
// Use the same visual treatment for hover as for focus.
.mat-button:hover,
.mat-stroked-button:hover {
  .mat-button-focus-overlay {
    opacity: 0.04;
  }
}

所以你的按钮开始是白色的，但不是某种淡出。您也可以在示例中看到这一点。您可以查找原始样式表here。