Angular 8中如何自定义Mat Paginator实现圆形按钮？

由于Angular的视图封装机制，组件内默认样式无法穿透到Mat Paginator的内部元素，你可以通过以下几种方式实现圆形按钮样式：

方法一：使用::ng-deep穿透组件样式 #

在组件的CSS/SCSS文件中添加以下代码，穿透视图封装修改内置样式：

::ng-deep .mat-paginator-navigation-button {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* 移除默认内边距，让按钮更贴合圆形 */
}

/* 可选：自定义hover状态 */
::ng-deep .mat-paginator-navigation-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* 可选：自定义禁用状态 */
::ng-deep .mat-paginator-navigation-button.mat-disabled {
  opacity: 0.26;
}

/* 可选：调整按钮内图标大小 */
::ng-deep .mat-paginator-navigation-icon {
  font-size: 20px;
}

方法二：全局样式文件中设置 #

如果不想使用::ng-deep，可以在项目根目录的styles.scss（或styles.css）中添加全局样式，直接作用于所有Mat Paginator：

.mat-paginator-navigation-button {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mat-paginator-navigation-button:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.mat-paginator-navigation-button.mat-disabled {
  opacity: 0.26;
}

.mat-paginator-navigation-icon {
  font-size: 20px;
}

进阶：给特定分页器设置样式 #

如果只需给某一个分页器应用圆形样式，可先给Mat Paginator添加自定义类：

<mat-paginator class="custom-round-paginator"></mat-paginator>

再在样式中限定范围：

::ng-deep .custom-round-paginator .mat-paginator-navigation-button {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者akash tyagi