点击时删除垫子按钮覆盖？答案

【问题标题】：Remove mat-btn overlay on click?点击时删除垫子按钮覆盖？
【发布时间】：2019-05-08 01:59:28
【问题描述】：

我有一个垫子菜单下拉菜单，里面有一个垫子按钮。我想删除用户单击下拉菜单后出现的叠加层。

我可以通过编写以下 css 来移除悬停覆盖。

.no-hover-effect ::ng-deep .mat-button-focus-overlay {
  background-color: transparent;
}

这就是 mat-button 的 html 代码的样子。

    <div class="mat-menu-wrapper mat-menu-size" [matMenuTriggerFor]="abc">
      <button mat-button class="mat-button no-hover-effect">
        <span class="mat-button-wrapper"><span class="mat-menu-text">
            xyz</span>
        </span>
      </button>
      <mat-menu #abc="matMenu">
        <button mat-menu-item>
          xyz
        </button>
        <button mat-menu-item>
          xyz
        </button>
      </mat-menu>
      <mat-icon class="mat-icon-ui">arrow_drop_down
      </mat-icon>
    </div>

【问题讨论】：

如果您能够移除覆盖层，那么这里有什么问题？
@dota2pro 覆盖在悬停时被删除，但在点击时不会被删除，这就是问题所在。
我认为你所说的“叠加”实际上是mat-button的涟漪效应。只需将 [disableRipple]="true" 添加到您的 mat-button 即可。
@Vahid 太好了，非常感谢 :)

标签： css angular angular-material angular-material-6

【解决方案1】：

您需要禁用 mat-button 的波纹效果。正如提到的here，您可以通过将[disableRipple]="true" 添加到您的mat-button 来禁用它。

了解more about ripple effect

【讨论】：