单击时删除垫按钮覆盖？

Question

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

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

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

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

    <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 的连锁反应。如前所述 here 您可以通过将 [disableRipple]="true" 添加到 mat-button.

来禁用它

学习more about ripple effect