如何修改PrimeNG Paginator的颜色与尺寸？

问题分析 #

你的代码存在几个关键问题导致样式不生效：

• CSS语法错误：第二个规则里错误使用了HTML的<em>标签包裹color属性，且代码未闭合（缺少}）
• 类名错误：PrimeNG新版本使用p-前缀，而非旧版的ui-，所以ui-paginator-page应该改为p-paginator-page
• 样式优先级不足：自定义类需要结合::ng-deep提升优先级，确保选择器足够具体

修正后的代码 #

CSS文件 #

/* 全局修改分页器文本颜色 */
:host ::ng-deep .p-paginator {
  color: #033335;
}

/* 自定义分页器的页码尺寸与颜色 */
:host ::ng-deep .custom-paginator .p-paginator-page {
  font-size: 36px;
  color: #333;
}

HTML文件 #

<div style="flex: 1 0 auto; margin-left: 10%">          
  <p-paginator
    class="custom-paginator"
    [rows]="10"
  ></p-paginator>
</div>

额外说明 #

• 若使用PrimeNG 14+版本，::ng-deep可替换为:host-context，或者直接在全局样式文件（如styles.css）中编写样式（无需::ng-deep）
• 如需修改分页器背景色、按钮样式等其他元素，可针对对应的p-paginator子类（如p-paginator-first、p-paginator-prev、p-paginator-next、p-paginator-last）添加样式

内容的提问来源于stack exchange，提问作者Lucky Gore