点击时删除 mat-btn 覆盖？

Question

我有一个垫子菜单下拉菜单，其中有一个垫子按钮。我想删除用户单击下拉菜单后出现的覆盖层。

我可以通过编写以下 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>

Answer 1

您需要禁用 mat-button 的涟漪效果。正如这里提到的，您可以通过添加[disableRipple]="true"到您的mat-button.

了解有关连锁反应的更多信息