如何移除mat-icon-button的默认悬停背景色？

要解决这个问题，核心是正确命中目标元素并处理Angular样式封装/优先级问题，同时注意MDCD风格按钮的样式控制逻辑，以下是可行方案：

1. 给按钮添加自定义类（避免影响全局所有按钮） #

<button mat-icon-button class="custom-icon-btn">
  <mat-icon>minimize</mat-icon>
</button>

2. 取消默认悬停效果 #

根据你的使用场景选择以下方法：

方法一：组件内样式（需穿透封装） #

如果样式写在组件的.component.css里，Angular默认的视图封装会阻止样式影响组件外部的Material内置元素，需要用:host ::ng-deep穿透：

:host ::ng-deep .custom-icon-btn.mdc-icon-button:hover {
  /* 覆盖背景色 */
  background-color: transparent !important;
  /* 覆盖MDCD按钮的状态层颜色（这是默认悬停效果的核心来源） */
  --mdc-icon-button-hover-state-layer-color: transparent;
}

方法二：全局样式（无需穿透） #

如果样式写在全局的styles.css/styles.scss里，直接写选择器即可：

.custom-icon-btn.mdc-icon-button:hover {
  background-color: transparent;
  --mdc-icon-button-hover-state-layer-color: transparent;
}

方法三：彻底禁用涟漪效果（可选） #

如果连点击/悬停的涟漪动画也不需要，可以直接给按钮添加禁用属性：

<button mat-icon-button [disableRipple]="true" class="custom-icon-btn">
  <mat-icon>minimize</mat-icon>
</button>

3. 添加自定义悬停效果 #

现在可以随意写自己的悬停样式了，比如：

.custom-icon-btn:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
  /* 其他自定义样式，比如阴影、缩放等 */
}

为什么你之前的方法无效？ #

• .mat-icon:hover：目标是<mat-icon>图标元素，但默认悬停效果是在<button>按钮本身，完全没命中正确元素
• .mat-mdc-icon-button:hover：要么是样式优先级低于Material内置样式，要么是Angular的视图封装导致样式无法作用到按钮上；另外MDCD按钮的悬停效果主要由CSS变量--mdc-icon-button-hover-state-layer-color控制，单纯改background-color可能无效

内容的提问来源于stack exchange，提问作者user10261018