Ngx-Pagination change default blue color to other color

Question

I am using ngx-pagination in Angular 16 application and I want to customize the default blue color into another , Can anyone help me.

Html code:

<div>
  <pagination-controls></pagination-controls>                       
</div>

CSS

.ngx-pagination .current{
  color: #ffffff !important;
  background-color: red !important;
}

Tried with above and similar css, it do not works.

Any help will be appreciated.

Answer 1

It worked after below changes.

HTML

<pagination-controls class="my-pagination"><pagination-controls>

CSS

.my-pagination ::ng-deep .ngx-pagination .current {
    background: red;
  }

Answer 2

Try these changes ,

/* Change the background color of the current page */
.pagination-current {
  background-color: red !important;
}

/* Change the text color of the current page */
.pagination-current a {
  color: #ffffff !important;
}

/* Change the background color of the page buttons */
.pagination-controls button {
  background-color: red !important;
}

If it is not working means , I want to Inspect your line of code further more

Answer 3

Your code is correct, and it should work. The only thing you need to ensure is that you place the CSS class correctly. It should not be at the component level where you are using ngx-pagination.

You have two options for placing the CSS class correctly:

Add the CSS class to the style.css file: You can add the following code to the style.css file in your Angular project:

.ngx-pagination .current {
  color: #ffffff !important;
  background-color: red !important;
}

Or create new file and import into style.css like this.

@import 'path/to/pagination-customization.css';

there is oficial live demo with my changes in style.css have a look pls.

https://angular-zgr18t.stackblitz.io