css - angular-material 按钮更改悬停背景

Question

我有一个角材料链接按钮元素：

<a mat-button>Link</a>

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

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

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

谢谢。

标签： cssangular-material

Answer 1

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

$white: white;

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

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