Angular中如何自定义PrimeNG分页器样式？

首先修正你代码里的拼写错误：rowsPerPageOpitons应该改为rowsPerPageOptions，这个小错误可能导致组件渲染异常，间接影响样式生效。修正后的代码：

<p-paginator styleClass="customPrime" [first]="first" [rows]="rows" [totalRecords]="120" [rowsPerPageOptions]="[10,20,30]"/>

针对样式不生效的问题，给出以下可行方案：

方案1：组件内样式（带样式穿透，避免全局污染） #

在组件的.component.scss文件中，结合:host和::ng-deep，并通过自定义的customPrime类限定样式范围，确保选择器优先级足够：

/* 分页器整体容器样式 */
:host ::ng-deep .customPrime {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
}

/* 每页条数下拉框容器 */
:host ::ng-deep .customPrime .p-dropdown {
  min-width: 90px;
  border-color: #dee2e6;
}

/* 下拉框输入标签样式 */
:host ::ng-deep .customPrime .p-dropdown .p-dropdown-label {
  color: #495057;
  font-size: 14px;
}

/* 下拉选项列表样式 */
:host ::ng-deep .customPrime .p-dropdown-items .p-dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
}

/* 下拉选项hover状态 */
:host ::ng-deep .customPrime .p-dropdown-items .p-dropdown-item:hover {
  background-color: #e9ecef;
}

方案2：全局样式文件（更稳定，适合通用样式） #

如果组件内样式穿透仍无效，可以将样式放到项目根目录的styles.scss（或styles.css）中，无需::ng-deep，直接通过customPrime类限定：

.customPrime {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
}

.customPrime .p-dropdown {
  min-width: 90px;
  border-color: #dee2e6;
}

.customPrime .p-dropdown .p-dropdown-label {
  color: #495057;
  font-size: 14px;
}

.customPrime .p-dropdown-items .p-dropdown-item {
  padding: 8px 12px;
  font-size: 14px;
}

.customPrime .p-dropdown-items .p-dropdown-item:hover {
  background-color: #e9ecef;
}

注意事项 #

• 检查PrimeNG版本：不同版本的分页器DOM结构可能略有差异，若上述选择器不生效，可以通过浏览器开发者工具（F12）查看下拉框的实际类名，调整CSS选择器。
• 避免直接全局修改.p-dropdown类：会影响所有PrimeNG下拉框，一定要通过自定义的styleClass限定范围。

内容的提问来源于stack exchange，提问作者Kadir Ersezer