更新

Question

我有一个Angular按钮：

<button md-button class="link-btn" >Cancel</button>

.link-btn {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

.link-btn:hover {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

通常设置透明背景，但在hover状态下，会显示灰色背景？如何删除？

Answer 1

按钮样式是封装的，因此您必须使用/ deep / selector来更改内部样式。

试试这个：

.link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}

Plnkr

更新

从Angular v4.3.0开始，/deep/选择器已弃用，将被::ng-deep选择器替换。您可以在文档中找到更多信息：Angular Documentation

Answer 2

尝试将以下内容添加到您的CSS ...

.mat-button-focus-overlay {
    background-color:transparent;
}

或者

.mat-menu-item:hover {
     background-color:transparent;
}

Answer 3

您也可以使用mat-flat-button代替mat-button，因为前者没有覆盖机制。您只需要覆盖组件中的背景颜色，与全局覆盖由角材料创建的动态创建的覆盖组件相比，imho是一种更清洁的机制。

Answer 4

您可以将全局样式应用于所有按钮。我使用Angular主题作为mat-icon-buttons。

$background: map-get($my-theme, background);

// add hover for mat-icon butttons
.mat-icon-button:hover {
   background-color: mat-color($background, hover);
 }

如何在悬停状态下更改角度材质按钮背景颜色？

4 个答案:

更新