如何更改 ngb 分页背景颜色答案

【问题标题】：how to change ngb-pagination background color如何更改 ngb 分页背景颜色
【发布时间】：2019-03-20 06:59:00
【问题描述】：

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

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

谢谢。

【问题讨论】：

我不太了解 ng-bootstrap，但据我所知，在他们的文档页面上，它是一个带有列表的组件，因此您有 ul 元素，其中包含 li 作为项目，并且两者都有他们的课程，所以试着改变他们的风格。
谢谢@Buczkowski 的回答，我试试看，把结果写在这里。

标签： angular pagination ng-bootstrap angular-bootstrap

【解决方案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和它的样式

【讨论】：

你必须使用::ng-deep ngb-pagination ...（更改顺序）。

【解决方案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;
}

谢谢。

【讨论】：

接受的答案不再起作用。 @ConnorsFan 回答对我有用。
/deep/ 目前已弃用。即使 ::ng-deep 不起作用，请访问 stackoverflow.com/questions/47024236/…

【解决方案3】：

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

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

【讨论】：

试过了，但是没有!important就不行

【解决方案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;
}

【讨论】：

【解决方案5】：

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

它适用于这个：

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

【讨论】：