如何在悬停状态下更改 Angular Material 按钮背景颜色？

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

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

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

或者

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

Answer 2

按钮样式被封装，所以你必须使用/deep/选择器来更改内部样式。

试试这个：

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

Plnkr

更新：

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

Answer 3

截至 Angular6，在所选解决方案中使用 /deep/ 或 ng-deep 是 marked for deprecation. The recommended way is to use global styles as stated in the docs.

Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components.

在按钮悬停背景的特定情况下，我必须在我的 styles.css 中使用以下代码（通过 angular-cli 包含的全局样式表或直接链接到 index.html） .请注意，您可能必须根据按钮中使用的调色板类型（color="primary" 或 color="accent" 或 color="warn"）将 primary 替换为 accent 或 warn。

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

如果您不希望每个按钮都受到影响，最好有一个特定的class，例如无悬停效果，如下所示。

.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
{
  background-color: transparent;
}

对于每个不需要悬停效果的 material 按钮，您都可以

  <button mat-button color="primary" class="no-hover-effect">
    No Hover Button
  </button>

Answer 4

您也可以使用 mat-flat-button 代替 mat-button，因为前者没有叠加机制。您只需要覆盖组件中的背景颜色，恕我直言，这是一种比全局覆盖动态创建的覆盖组件更简洁的机制 angular material 创建。

Answer 5

您可以将应用程序的全局样式应用于所有按钮。我使用 Angular 垫子图标按钮的主题来做到这一点。

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

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

如何在悬停状态下更改 Angular Material 按钮背景颜色？

How can I change Angular Material button background color on hover state?

angular-material2

angular

更新：