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

发布于11月16日

我有一个棱角material 分页器，我目前正在定制的css.

它看起来是这样的:

我无法在我的设备上录制我的屏幕，所以我会解释的.

右侧的两个箭头按钮是Angular material 图标按钮.

当我单击它们时，会出现涟漪效果(灰色圆圈).我需要删除这种连锁react .

我无法判断发生这种情况的元素，因为它只在单击时出现.

我已经判断过这个问题和最常见的答案，使用[disableRipple]="true"在这里不起作用，因为Angular 分页器没有这个属性.我正在与几个开发人员在一个大项目中工作，所以我不想接触全局SCSS文件.

这是我的代码，顺便说一下:

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

如何才能消除箭头按钮上的涟漪效果？

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

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

推荐答案

Css相关问答推荐

为什么我的CSS关键帧动画在循环之间稍微暂停？

容器内的中心固定元件

当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器？

Nuxt 3+sass：不能将包含路径与@IMPORT和@USE一起使用

Astro网站在使用Astro Build构建后无法正常工作

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

Puppeteer - 无法在wine 店网站中拉出正确的 CSS Select 器

有没有办法在 CSS 字体速记中使用数字字体粗细？

CSS 网格 - 具有独立可滚动区域的两列布局

我想在视频上使用混合混合模式的 svg

antd 中的子菜单项不可滚动

如何将 Google 字体链接到我的 Nuxt 文件？

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名？

你可以在 CSS 中扩展实体(entity)吗？

单击时 HTML 输入字段未获得焦点

将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

完成后如何防止css3动画重置？

如何重置或覆盖 IE CSS 过滤器？

更改 html 列表中项目符号的 colored颜色？