如何在悬停状态下更改 Angular Material 按钮背景颜色? [英] How can I change Angular Material button background color on hover state?

问题描述

我有一个 Angular 按钮:

I have an Angular button:

<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状态下，显示灰色背景?如何删除?

Normally it is setting transparent background, but in hover state, gray background is shown? How to remove that?

推荐答案

从 Angular 6 开始，在选择的解决方案中使用/deep/或 ng-deep 是 标记为弃用.推荐的方法是使用 docs 中所述的全局样式.

As of Angular 6, the use of /deep/ or ng-deep in the chosen solution is marked for deprecation. The recommended way is to use global styles as stated in the docs.

一些 Angular Material 组件，特别是基于叠加层的组件，例如MatDialog、MatSnackbar 等，不作为您的子项存在成分.通常它们被注入到 DOM 的其他地方.这是重要的是要记住，因为即使使用高特异性和阴影穿透选择器不会针对非直接元素你的组件的孩子.建议使用全局样式以此类组件为目标.

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")，您可能需要将主要替换为重音或警告.

In the specific case of button hover background, I had to use the following code in my styles.css (global stylesheet included via angular-cli or directly linked in index.html). Note that you might have to replace primary with accent or warn depending on the palette type (color="primary" or color="accent" or color="warn") used in the button.

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

如果你不想让每个按钮都受到影响，最好有一个特定的类，比如如下所示的 no-hover-effect.

If you don't want every button to be affected, it's better to have a specific class like no-hover-effect as shown below.

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

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

For every material button that doesn't need hover-effect, you'd do

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

这篇关于如何在悬停状态下更改 Angular Material 按钮背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！