更改 mat-button-focus-overlay 的背景颜色而不使用 !important

Question

Angular Material 文档中有一些我想重用的内容，并且我想以正确的方式进行操作： https: //material.angular.io/components/categories 我希望在顶部栏上有具有相同 div 的按钮.mat-button-focus-overlay 其中有：

.mat-button-focus-overlay {
   background-color: rgba(0,0,0,.12);
}

无论我做什么，我得到的都是这样：

.mat-button-focus-overlay {
   background-color: rgba(63, 81, 181, 0.12);
}

这使得我的颜色与条形相同，因此悬停时的叠加层不可见。示例： https: //stackblitz.com/edit/angular-lwmxw7

如何以正确的方式去做呢？我不想使用任何技巧，只想使用最佳实践:)

编辑：

当我将其放入组件的 scss 文件时，我发现了一些奇怪的东西：

body mat-toolbar.mat-toolbar button.mat-button div.mat-button-focus-overlay {
    background-color: rgba(0,0,0,0.12);
}

它不起作用，看起来它甚至不存在于浏览器中的样式列表中（？），但是移至 style.scss 的相同代码就像魅力一样......有人知道为什么吗？

Answer 1

达到与角度材质文档页面相同的效果。只需从按钮上删除颜色绑定即可。文本颜色也不是必需的。

组件.html

<mat-toolbar color="primary">
  <span>Custom Toolbar</span>
  <button mat-button>test</button>
</mat-toolbar>