ngx-bootstrap：如何改变分页按钮的外观

Question

我在我的项目中使用了 ngx-bootstrap 的分页组件，并尝试更改按钮及其外观，但失败了。有办法改变吗？

我的组件：

<div class="table-container">
  <table class="table">
    <thead>
      <tr class="table-nav">
        <th scope="col">שנה</th>
        <th scope="col">סוג הדוח</th>
        <th scope="col">ח.פ</th>
        <th scope="col">שם החברה</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let tax of currentPage">
        <tr>
          <td>{{tax.year}}</td>
          <td>{{tax.type}}</td>
          <td>{{tax.cid}}</td>
          <td>{{tax.company}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
  <div class="table-footer">
  <pagination class="pagination" nextText=">" previousText="<" [align]="true" 
    [totalItems]="totalItems" (pageChanged)="pageChanged($event)">
  </pagination>
</div>
</div>

这是默认样式：

我需要让它看起来像这样：

Answer 1

我通过首先在我的分页元素中添加 class 我的分页来修复它，例如

<pagination 
                                    [maxSize]="maxSizeBtn" 
                                    [firstText]="firstText" 
                                    [lastText]="lastText"   
                                    [previousText]="prevText"   
                                    [nextText]="nextText"   
                                    [itemsPerPage]="perPage"
                                    [boundaryLinks]="showBoundaryLinks" 
                                    [totalItems]="totalItems" 
                                    [(ngModel)]="currentPage" 
                                    (pageChanged)="pageChanged($event)" 
                                    (numPages)="smallnumPages = $event" 
                                    id="comp-pagination" 
                                    class="my-pagination" 
                                    ></pagination>

在此之后，我强制选择的页面项目必须具有像这样的红色背景色。您将 CSS 指令放入 .css 组件文件

//改变分页背景选中按钮的颜色

.my-pagination::ng-deep .page-item.active .page-link {
    z-index: 1;
    color: #FFFFFF;
    background-color:red !important;
    border-color: #009DA0;
}

不要忘记 !important 说明覆盖所选页面项目的默认背景颜色

谢谢

ngx-bootstrap：如何改变分页按钮的外观

ngx-bootstrap: How to change the look of pagination buttons

ngx-bootstrap

angular