如何更改 ngb 分页背景颜色

Question

我尝试将背景颜色设置为 angular2 的 ngb-pagination 项目，但不起作用。

<ngb-pagination style="background-color:gray;" [collectionSize]="120" [(page)]="page" [maxSize]="5" [boundaryLinks]="true">

谢谢你。

Answer 1

我不知道这个库是否提供了一种自定义主题的方法，如果那是最好的方法。

但是如果你想覆盖一些组件内部样式，你可以使用::ng-deep.

    ngb-pagination ::ng-deep ul > li:not(.active) > a {
          background-color: red !important;
    }

    ngb-pagination ::ng-deep ul > li.active > a {
          background-color: lightgreen !important;
    }

也style="background-color:gray;"肯定不行，你可以看到DOM和它的风格

Answer 2

参加聚会有点晚了，但我通过将以下代码添加到我的 css 文件中使其在 Angular 8 中工作：

ngb-pagination ::ng-deep a {
  color: black !important;
}

ngb-pagination ::ng-deep .page-item.active .page-link {
  border-color: black;
  background-color: lightgrey;
}

ngb-pagination ::ng-deep .page-item.active .page-link:focus, .page-link:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.1rem dimgrey;
}

ngb-pagination ::ng-deep .page-link:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.1rem dimgrey;
}

Answer 3

我找到了解决方案，感谢帮助。在我的情况下，问题的解决就像我的 css 文件中的那样。只需使用关键字即可覆盖分页内容/deep/。

/deep/ .pagination .page-item .page-link {
  border-radius: 0 !important;
}

/deep/ .pagination .page-link {
  border-top-style: none !important;
  border-bottom-style: none !important;
  background-color: #f6f6f6 !important;
  color: black !important;
}

谢谢。