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

Question

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

我正在使用 Material 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;
  }

}

我的问题是如何去除按钮的背景颜色？

Answer 1

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

Answer 2

背景颜色以焦点叠加的形式出现 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

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

Can't remove background color from md button

angular-material

angular-material2