css - Angular Material 按钮更改悬停背景

Question

我有一个 Angular Material 链接按钮元素:

<a mat-button>Link</a>

我想将其悬停背景更改为粗体白色，因此在我的全局 styles.css 文件中定义:

.mat-button-focus-overlay {
   background: rgba(255, 255, 255, 0.8)!important;
}

链接本身没有任何附加样式。我可以看到悬停时的背景颜色确实变成了白色，但是变成了非常浅的白色，尽管不透明度设置为 0.8。有办法解决这个问题吗？

谢谢。

Answer 1

在您的全局 styles.css 中，您有机会直接覆盖 mat-button 的作用 - 正常和悬停:示例:

$white: white;

.mat-button {
  color: $white;
  background: $white;
}

.mat-button:hover {
  color: $white;
  background: $white;
}