Ng-zorro组件分页器Pagination样式修改笔记

Ng-zorro组件分页器Pagination样式修改记录

实现功能图例：
实现代码，html部分

 <div class="footer">
    <nz-pagination [nzPageIndex]="1" [nzTotal]="10" [nzPageSize]="5" [nzShowTotal]="totalTemplate" nzSize=small></nz-pagination>
    <br />
    <ng-template #totalTemplate let-total>Total {{ total }} items</ng-template>
 </div>

CSS修改

/* 分页器 */
.footer /deep/  .ant-table-pagination.ant-pagination {
  margin: 5px;
}
.footer /deep/ .ant-pagination {
  color: #ffffff;
  margin-top: 1%;
}
.footer /deep/ .ant-pagination-item a {
 color: #ffffff;
}
.footer /deep/  .ant-pagination-next button,
.ant-pagination-prev button {
  color: #fff;
}
.footer /deep/ .ant-pagination-item-active:focus-visible,
.ant-pagination-item-active:hover,
.ant-pagination-next:hover button,
.ant-pagination-prev:hover button {
  border-color: #489c9c;
}
.footer /deep/ .ant-pagination-item-active {
  font-weight: 500;
  background-color: #489c9c;
  border-color: #489c9c;
}