在没有 !important 的情况下更改 mat-button-focus-overlay 的背景颜色答案

【问题标题】：Change background-color of mat-button-focus-overlay without !important在没有 !important 的情况下更改 mat-button-focus-overlay 的背景颜色
【发布时间】：2021-01-17 16:59:19
【问题描述】：

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 的相同代码就像一个魅力......谁知道为什么？

【问题讨论】：

标签： css angular sass angular-material2

【解决方案1】：

达到和angular material doc page一样的效果。只需从按钮上移除颜色绑定即可。 text-color 也不是必须的。

component.html

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

【讨论】：

天哪！你节省了我的时间。谢谢！你知道为什么会发生我在 EDIT 中描述的事情吗？
组件样式仅适用于组件模板。您不能在此组件之外创建 css 选择器。 body 不是组件的一部分，因此选择器仅适用于全局 styles.css 如果您向 body 添加一个类，您可以在组件内创建一个选择器：host-context(.body-class) body ...
好知识。谢谢！

【解决方案2】：

您可以覆盖类，其他人也可以通过多种方式覆盖您的更改。这只是一个应该可行的示例。

body .mat-button-focus-overlay

您可以在此处阅读更多特异性战斗。

https://css-tricks.com/a-specificity-battle/

【讨论】：

【解决方案3】：

我用过这个方法

::ng-deep .mat-button-focus-overlay {
    background-color: red!important;
    opacity: 1 !important;
}

【讨论】：