I have a mat-menu dropdown, having a mat-button in it. I want to remove the overlay that appears once user clicks the dropdown.
I am able to remove the hover overlay by writing the following css.
.no-hover-effect ::ng-deep .mat-button-focus-overlay {
background-color: transparent;
}
This is how html code for mat-button looks like.
<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>
[disableRipple]="true"
to yourmat-button
and it's gone. – Vahid