如何改变ngx分页的颜色？

Question

我想更改ngx分页的背景色。

我的代码：

<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>

默认的背景色是蓝色，我想要更改为红色。

我该怎么做？

解决方案：

在CSS中：

.custom-pagination /deep/ .ngx-pagination .current {background: red;}

并在项目中安装jquery。

Answer 1

使用pagination-template而不是pagination-controls。

示例：

<pagination-template
          #p="paginationApi"
          (pageChange)="onPageChange($event)"
          *ngIf="myList">
    <div class="pagination-custom">
      <ul class="pagi">
        <li class="item">
          <a *ngIf="!p.isFirstPage()"
             [class.disabled]="p.isFirstPage()"
             (click)="p.previous()"
             class="page-link"
             aria-label="Previous">
            <span aria-hidden="true" class="la la-caret-left"></span>
            <span class="sr-only">Previous</span>
          </a>
        </li>
        <li *ngFor="let page of p.pages"
            [class.active]="p.getCurrent() === page.value"
            class="page-item">
          <a (click)="p.setCurrent(page.value)"
             class="page-link">  {{ page.label }}
          </a>
        </li>

      </ul>
    </div>
  </pagination-template>

Answer 2

您可以通过编辑CSS文件中的分页器来实现这一点。例如(红色背景和红色边框)：

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

您可以将其添加到全局css文件中。

一个全红色分页器的例子：

.page-item.active .page-link {
    background-color: red;
    border-color: red;
}

.page-link {
    color: red; 
}

.page-link:hover {
    color: red; 
}

Answer 3

( (document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black'；

有角