需要从 angular mat-paginator 中删除或自定义分页箭头答案

【问题标题】：Need to remove or customize pagination arrows from angular mat-paginator需要从 angular mat-paginator 中删除或自定义分页箭头
【发布时间】：2019-03-19 13:36:34
【问题描述】：

我实际上需要删除 angular mat-paginator 上的箭头，因为我需要自定义设计。如果可以更改这些箭头的样式，也可以解决此问题。 mat-paginator 的链接如下。

https://material.angular.io/components/paginator/overview

The arrows which i need to remove are shown in following picture.

提前致谢。

【问题讨论】：

你可以用自定义 CSS 来实现，通过覆盖这个类
尝试覆盖此类“mat-paginator-icon”，但没有任何反应

标签： html css angular angular6

【解决方案1】：

你可以覆盖css类mat-paginator-icon

例如：

/deep/ .mat-icon-buton{
  background-color: yellow;
}

在覆盖任何材质类之前不要忘记附加/deep/。

演示在这里https://stackblitz.com/edit/angular-material-pagination-123456

注意：最好用材料主题https://material.angular.io/guide/theming覆盖css。

【讨论】：

1.什么是 /deep/？
/deep/ 的初衷是提供一种方法来处理当范围边界妨碍偶尔实际需要从范围之外或全局调整样式时的异常情况。
我也试过了，还是不行。它仅在我检查 chrome 上的临时元素时才有效。
/deep/ 不是已弃用吗？ Chrome 将其列为已删除的功能here。
它工作我没有使用。（点）在 mat-paginator-icon 之前感谢您的帮助。

【解决方案2】：

请尝试下面的 CSS 代码。

  .mat-paginator-navigation-previous {
        display: none !important;
    }

.mat-paginator-navigation-next {
            display: none !important;
        }

（或）

  .mat-paginator-navigation-previous {
       opacity: 0 !important;
       width: 0;
       height: 0;
   }

   .mat-paginator-navigation-next {
      opacity: 0 !important;
      width: 0;
      height: 0;
    }

【讨论】：

【解决方案3】：

您可以使用这些类来根据自己的喜好设置寻呼机样式：

mat-paginator-navigation-first (1)
mat-paginator-navigation-previous (2)
mat-paginator-navigation-next (3)
mat-paginator-navigation-last (4)
mat-paginator-range-label (5)
mat-paginator-range-actions (6)
mat-paginator-page-size-select (7)
mat-paginator-page-size-label (8)
mat-paginator-page-size (9)

在我的例子中，我只想留下下拉菜单 (9)，所以我用 display: none: 隐藏其余部分：

 .mat-paginator-range-actions {
            display: none !important;
  }

结果：

【讨论】：