如何修改Angular Material分页器（Mat Paginator）的默认CSS样式？

1. 用::ng-deep精准定位内部元素 #

你可以通过浏览器开发者工具（F12）查看分页器的DOM结构，找到内部元素的类名，再结合::ng-deep来覆盖样式，示例代码如下：

/* 调整页码选择器的间距 */
::ng-deep .mat-paginator-page-size {
  margin-right: 20px;
}

/* 修改页码下拉框的样式 */
::ng-deep .mat-paginator-page-size-select {
  background-color: #f5f5f5;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* 自定义上一页/下一页按钮样式 */
::ng-deep .mat-paginator-navigation-previous,
::ng-deep .mat-paginator-navigation-next {
  color: #2196f3;
  border: 1px solid #2196f3;
  border-radius: 50%;
  padding: 4px;
}

/* 禁用状态的导航按钮样式 */
::ng-deep .mat-paginator-navigation-previous[disabled],
::ng-deep .mat-paginator-navigation-next[disabled] {
  color: #bbb;
  border-color: #bbb;
}

/* 调整页码按钮的大小和圆角 */
::ng-deep .mat-paginator-page {
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 2px;
}

/* 当前激活页码的样式 */
::ng-deep .mat-paginator-page.mat-selected {
  background-color: #2196f3;
  color: white;
}

2. 关闭组件视图封装（避免重复写::ng-deep） #

如果不想用::ng-deep，可以在组件的TS文件里关闭视图封装，然后给样式加上父组件选择器做前缀，防止污染全局样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent { }

对应的CSS代码：

/* 用父组件选择器限定作用范围 */
app-your-component .mat-paginator-page-size-select {
  background-color: #f5f5f5;
}

app-your-component .mat-paginator-navigation-previous {
  color: #2196f3;
}

3. 全局自定义Material主题（进阶） #

如果要统一修改整个项目的分页器样式，可以在全局样式文件（比如styles.scss）里自定义Material主题：

@import '~@angular/material/theming';

@include mat-core();

/* 定义自定义主题色 */
$custom-primary: mat-palette($mat-blue);
$custom-accent: mat-palette($mat-teal);
$custom-warn: mat-palette($mat-red);

$custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

@include angular-material-theme($custom-theme);

/* 全局覆盖分页器样式 */
.mat-paginator {
  .mat-paginator-navigation-previous,
  .mat-paginator-navigation-next {
    color: $custom-primary;
  }

  .mat-paginator-page.mat-selected {
    background-color: $custom-accent;
  }
}

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