Angular：如何修改ng-bootstrap分页组件样式

完全可以通过自定义CSS覆盖默认样式结合现有自定义模板来实现目标效果，以下是具体实现步骤：

一、核心实现思路 #

ng-bootstrap分页基于Bootstrap样式体系，我们可以通过高优先级的CSS规则覆盖默认组件样式，同时调整你已有的自定义页码输入模板的布局样式，使其匹配目标视觉效果。

二、具体代码实现 #

1. 保留现有HTML结构（无需修改） #

<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [boundaryLinks]="true" [pageSize]="pageSize" (pageChange)="refreshContent()">
  <ng-template ngbPaginationPages let-page let-pages="pages">
    <li class="ngb-custom-pages-item" *ngIf="pages.length > 0">
      <div class="mb-3 d-flex flex-nowrap px-2">
        <label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
        <input
          #i
          type="text"
          inputmode="numeric"
          pattern="[0-9]*"
          class="form-control custom-pages-input"
          id="paginationInput"
          [value]="page"
          (keyup.enter)="selectPage(i.value)"
          (blur)="selectPage(i.value)"
          (input)="formatInput($any($event).target)"
          aria-labelledby="paginationInputLabel paginationDescription"
          style="width: 2.5rem"
        />
        <span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{pages.length}}</span>
      </div>
    </li>
  </ng-template>
</ngb-pagination>

2. 添加自定义CSS样式 #

在组件的CSS文件中添加以下样式（若使用默认组件封装，可添加:host ::ng-deep前缀穿透，或直接写入全局样式文件）：

/* 覆盖分页容器默认样式 */
.pagination {
  gap: 0.25rem;
  align-items: center;
  border: none;
}

/* 修改分页项样式 */
.page-item {
  border-radius: 0.375rem;
  overflow: hidden;
}

/* 修改分页链接样式 */
.page-link {
  padding: 0.5rem 0.75rem;
  border: none;
  color: #333;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

.page-link:hover {
  background-color: #e9ecef;
  color: #333;
}

.page-item.active .page-link {
  background-color: #0d6efd;
  color: white;
}

.page-item.disabled .page-link {
  background-color: #e9ecef;
  color: #6c757d;
}

/* 调整自定义页码输入区域样式，与分页按钮对齐 */
.ngb-custom-pages-item {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
}

.ngb-custom-pages-item .mb-3 {
  margin-bottom: 0 !important;
}

.custom-pages-input {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

三、细节调整 #

可以根据目标样式的具体视觉细节，修改CSS中的参数：

• 调整border-radius值改变圆角大小
• 修改background-color、color匹配目标配色
• 调整padding、gap控制元素间距

内容的提问来源于stack exchange，提问作者Henrique Fernandez