如何在不使用ng-deep的情况下缩小mat-paginator的箭头尺寸？

方法1：自定义类 + 全局样式文件 #

这是最可靠的方案，既能实现样式修改，又不会影响其他组件：

• 在组件模板中，给目标分页器添加唯一自定义类：

<mat-paginator class="small-arrow-paginator" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

• 在项目根目录的全局样式文件（如styles.scss/styles.css）中写入样式：

.small-arrow-paginator .mat-paginator-icon {
  width: 3vh;
  margin-top: -0.5vh;
}

通过自定义类精准限定样式作用范围，仅对标记过的分页器生效。

方法2：使用Angular Material自定义CSS变量（可选） #

若Angular Material版本支持，可通过组件暴露的CSS变量直接调整：

:host {
  --mat-paginator-icon-width: 3vh;
  /* 若存在控制margin的变量，可同步设置 */
}

这种方式无需依赖全局样式，但需要确认目标组件是否提供了对应的可配置变量，若未提供则优先选择方法1。

内容的提问来源于stack exchange，提问作者Saad Ali