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

我有一个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;
}

通常它是设置透明背景,但在悬停状态下,显示灰色背景？如何删除？

解决方法

从Angular 6开始,在所选解决方案中使用/ deep /或ng-deep是 marked for deprecation.推荐的方法是使用 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中直接链接).请注意,您可能必须使用重音或警告替换primary,具体取决于按钮中使用的调色板类型(color =“primary”或color =“accent”或color =“warn”).

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

如果您不希望每个按钮都受到影响,最好有一个特定的类,如no-hover-effect,如下所示.

.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;
}

对于每个不需要悬停效果的素材按钮,你都可以

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