无需!important修改mat-button-focus-overlay背景色，求Angular Material正确实现方案

我之前也踩过这个坑！核心问题是你写的样式选择器权重不够，被Angular Material的默认样式覆盖了，再加上默认的overlay颜色刚好和顶栏背景色一致，导致hover时完全看不到效果。不用!important的话，只要提升选择器的特异性就能搞定，具体可以这么做：

方案一：组件内使用嵌套选择器提升权重 #

在你的顶栏组件样式文件里，通过多层类选择器定位目标元素，这样权重会比Material的默认样式更高：

// 适配顶栏为mat-toolbar、按钮为mat-button的结构
.mat-toolbar .mat-button .mat-button-focus-overlay {
  background-color: rgba(255, 255, 255, 0.3); // 可根据顶栏颜色调整，比如深色顶栏用半透明白色
}

这个选择器是3个类选择器叠加，比默认的单个.mat-button-focus-overlay权重更高，能顺利覆盖默认样式，完全不需要!important。

方案二：全局样式中用精准选择器 #

如果是在全局样式文件（比如styles.scss）里配置，同样可以用更精准的层级选择器：

.mat-toolbar-row .mat-button .mat-button-focus-overlay {
  background-color: rgba(0, 0, 0, 0.2); // 浅色顶栏可选用半透明黑色
}

这里借助mat-toolbar-row（顶栏的行容器）进一步细化选择范围，确保样式优先级足够。

额外小提示 #

你可以根据顶栏的实际背景色调整background-color的透明度和色调，比如深色顶栏搭配浅色系半透明overlay，浅色顶栏搭配深色系半透明overlay，这样hover时的反馈效果会非常明显。

把你的示例项目里的组件样式换成上面的代码，就能看到hover时的overlay正常显示啦～

内容的提问来源于stack exchange，提问作者mgrom