删除点击时的mat-btn叠加层？

Question

我有一个mat-menu下拉菜单，里面有一个mat-button。 我想删除用户单击下拉列表后出现的叠加层。

我可以通过编写以下CSS来删除悬停叠加层。

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

这是按钮按钮的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

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

学习more about ripple effect