how to change ngb-pagination background color

Question

I try to set background color to ngb-pagination item for angular2, but is does not work.

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

Thank you.

Answer 1

I don't if this library provide a way to customize the theme, if there that will be the best way.

But if you want to override some of the component inner styles you can use ::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;
    }

Also style="background-color:gray;" will definitely not work, you can see the DOM and it's style

Answer 2

A little late to the party, but I got it to work in Angular 8 by adding the following code to my css file:

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

I found the solution, thank for helping. In my condition problem solved like that in my css file. To overwrite the pagination stuff just using /deep/ keyword.

/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;
}

Thank you.