Question

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

echo date('Y-M-D h:i:s', time());

无论我做什么，我所拥有的一切都是：

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

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

如何以正确的方式做到这一点？我不想使用任何黑客攻击，只有最佳实践：）

编辑：

我发现了一些奇怪的东西......当我把它放到组件的scss文件中时：

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

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

Answer 1

获得与角度材质文档页面相同的效果。只需从按钮中删除颜色装订即可。文字颜色也没有必要。

<强> component.html

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

Answer 2

您可以通过其他方式覆盖更改的方式覆盖类，以及多种方式。这只是一个应该有用的例子。

body .mat-button-focus-overlay

你可以在这里阅读更多特异性战斗。

Answer 3

我用过这个方法

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