Angular使用Mat Paginator组件时如何去除页码按钮的背景色？

你可以使用如下两种方案实现需求：

方案1：在组件样式中使用::ng-deep（推荐，不会污染全局样式） #

在你的组件对应的css/scss文件中添加如下代码即可：

/* 用:host包裹避免样式泄漏到其他组件的分页器 */
:host ::ng-deep .mat-paginator .mat-icon-button {
  background-color: transparent !important;
  /* 同时去掉 hover、focus、点击状态的灰色背景 */
  &:hover, &:focus, &:active {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* 如果需要同时去掉页码数字的默认灰色背景，添加这段 */
:host ::ng-deep .mat-paginator .mat-paginator-page {
  background-color: transparent !important;
  /* 选中态的页码背景可以根据需求自定义，不需要就删掉下面三行 */
  &.mat-selected {
    background-color: #2196f3 !important;
  }
}

如果你使用的是Angular Material v15+的MDC版本，需要调整类名适配新版的组件结构：

:host ::ng-deep .mat-mdc-paginator .mdc-icon-button {
  background-color: transparent !important;
  &:hover, &:focus, &:active {
    background-color: transparent !important;
  }
}

方案2：在全局样式中定义（不需要用::ng-deep） #

如果你不想使用已被Angular标记为废弃的::ng-deep，可以先给你的分页器加自定义类名：

<mat-paginator class="custom-paginator" style-paginator showFirstLastButtons [showTotalPages]="3" [refreshButtons]="dataSource.data.length" [length]="dataSource.data.length" [pageSizeOptions]="[15, 30, 45, 60]">
</mat-paginator>

然后在全局的styles.css/styles.scss中添加代码：

.custom-paginator .mat-icon-button {
  background-color: transparent !important;
  &:hover, &:focus, &:active {
    background-color: transparent !important;
  }
}

注意：代码中的!important是为了覆盖Material组件内置的高优先级样式，若你的自定义选择器优先级足够可以省略。

内容的提问来源于stack exchange，提问作者Aleksandar Zoric