如何更改 ngb-pagination 背景颜色

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 文件中那样解决了。仅使用 /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;
}

谢谢。

Answer 3

对我来说，下面的示例非常有效。

ngb-pagination .page-item.active .page-link {
  background-color: #7460ee;
  border-color: #7460ee;
}

Answer 4

晚会有点晚了，但我通过将以下代码添加到我的 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 5

建议的答案对我没有任何影响，::ng-deep 选择器看起来对我的页面没有影响。

它适用于此：

ngb-pagination .page-item.active .page-link
    z-index: 3
    color: #fff   // text color
    background-color: #00AED6

如何更改 ngb-pagination 背景颜色

how to change ngb-pagination background color

pagination

angular-bootstrap

ng-bootstrap

angular