Question

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

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

谢谢。

Answer 1

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

如果该库提供了一种自定义主题的方法，那是最好的方法。

但是，如果要覆盖某些组件内部样式，可以使用::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 4

对我来说，下面的示例就像一个魅力。

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

Answer 5

建议的答案对我没有任何作用，::ng-deep选择器似乎对我的页面没有影响。

它与此配合使用：

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

如何更改ngb分页背景色

5 个答案: