Question

在悬停状态下，当我悬停时，我试图删除md按钮的背景颜色，但我无法影响它。

我使用材料2

在我的HTML中，我有以下内容：

<div class="case-nav-container">
  <div *ngFor="let item of nav">
    <a md-button           
       routerLinkActive #rla="routerLinkActive"
       class = "case-button"
       [class.active]="rla.isActive">{{item.display}}</a> <br>
  </div>
</div>

在我的SCSS中，我有：

a.case-button{

  min-width: 200px;
  text-align: left;

  &:hover{
    border-left: solid blue 6px;
    background-color: none;
  }

}

我的问题是如何删除按钮的bg颜色？

Answer 1

背景颜色以焦点叠加div的形式出现。这将删除它，

<强>模板：

<a mat-button class="no-hover">Basic Button</a>

<强>的CSS：

.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
  background: none;
}

<强>演示：

https://stackblitz.com/edit/angular-material2-issue-dyck3s

Answer 2

我认为您需要提高SCSS的特异性。试试.case-nav-container a .case-button。您的SCSS需要比Angular Material代码更具体地解决您正在修改的元素。在某些情况下，增加特异性对于元素不实用，重要的SCSS属性也可以覆盖Angular Material默认背景颜色。

无法从md按钮中删除背景颜色

2 个答案: