如何禁用 Angular Material Pagination 按钮的波纹效果？

Question

I have an Angular Material Paginator which I am currently customizing the css of.

It looks like this:

I cant record my screen on my device so I will explain.

The two arrow buttons on the right side are Angular Material Icon Buttons.

When I click them, a ripple effect (gray circle) appears. I need to delete that ripple effect.

I couldn't inspect the element where it happens because it only appears on a click.

I checked SO already about this question and the most common answer, to use [disableRipple]="true" doesn't work here, since angular paginator does not have this property. I am working in a big project with several developers, so I would not like to touch global scss files.

This is my code btw:

<mat-paginator
    #paginator
    (page)="changePage($event)"
    [length]="imagesAndFiles.length"
    [pageIndex]="pageIndex"
    [pageSize]="pageSize"
    [pageSizeOptions]="[4, 8, 16, 24, 32]"
  >
</mat-paginator>

How can I remove the ripple effect from the arrow buttons?

Answer 1

There is a directive called matRippleDisabled that can be used in the paginator.
See the official doc about ripple

Answer 2

You can use css to hide the ripple element

• Add a class to the paginator element
• Hide the mat-button-ripple class

<mat-paginator
  class="hide-ripple"
  #paginator
  (page)="changePage($event)"
  [length]="imagesAndFiles.length"
  [pageIndex]="pageIndex"
  [pageSize]="pageSize"
  [pageSizeOptions]="[4, 8, 16, 24, 32]"
>
</mat-paginator>

.hide-ripple {
  ::ng-deep {
    .mat-button-ripple {
      display: none;
    }
  }
}