如何自定义Angular Material中mat-paginator样式实现目标分页效果

实现自定义mat-paginator样式的调整方案 #

Angular Material组件默认开启了样式封装，直接写类选择器无法命中组件内部元素，是你之前样式不生效的核心原因，按以下步骤调整即可：

1. 如果是在组件的独立样式文件中写代码，需要加::ng-deep做样式穿透，配合:host限定作用域避免污染全局样式；如果是在项目全局样式文件（如styles.css）中写代码，直接去掉:host ::ng-deep前缀即可。
2. 修正原有错误属性：border-radius: none是无效值，需要改为border-radius: 0。
3. 补充页码数字、选中状态、按钮间距的匹配样式。

完整可直接使用的样式代码如下：

/* 隐藏不需要的默认模块 */
:host ::ng-deep .mat-paginator-page-size{
  display: none !important;
}
:host ::ng-deep .mat-paginator-range-label{
  display: none !important;
}

/* 所有分页按钮（前后翻页+数字页码）通用尺寸样式 */
:host ::ng-deep .mat-paginator .mat-icon-button,
:host ::ng-deep .mat-paginator .mat-paginator-page {
  border-radius: 0 !important;
  height: 40px !important;
  width: 40px !important;
  line-height: 40px !important;
  margin: 0 2px !important;
  font-size: 14px !important;
  padding: 0 !important;
}

/* 未选中状态的按钮样式 */
:host ::ng-deep .mat-paginator .mat-paginator-page:not(.mat-paginator-page-selected),
:host ::ng-deep .mat-paginator .mat-icon-button {
  background-color: #f5f5f5 !important;
  color: #333 !important;
}

/* 选中状态的页码样式 */
:host ::ng-deep .mat-paginator .mat-paginator-page.mat-paginator-page-selected {
  background-color: #00a6ff !important;
  color: #fff !important;
}

/* 可选：hover效果，按需调整 */
:host ::ng-deep .mat-paginator .mat-icon-button:hover,
:host ::ng-deep .mat-paginator .mat-paginator-page:not(.mat-paginator-page-selected):hover {
  background-color: #e0e0e0 !important;
}

/* 可选：调整分页器整体对齐方式，比如右对齐 */
:host ::ng-deep .mat-paginator-container {
  justify-content: flex-end !important;
  padding: 8px 0 !important;
}

内容的提问来源于stack exchange，提问作者Ganesh Goel