angular - 如何在悬停状态下更改 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

从 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 中)。请注意，根据按钮中使用的调色板类型(color="primary"或 color="accent"或 color="warn")，您可能必须将 primary 替换为 accent 或 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;
}

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

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