How do I override the css?

I’ve tried to override the font size/font/colors/etc and have had no luck. Also, it doesn’t look like you can currently replace the ‘Previous’ or ‘Next’ text, is that correct.

I’ve tried a couple of the examples below to no avail. Am I doing something wrong?

[override] .bulkResults pagination-controls .ng2-pagination li {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 0.875rem;
  margin-right: 0.0625rem;
  border-radius: 0;
  color: #ffffff;
}

.bulkResults pagination-controls a:hover,
.bulkResults pagination-controls button:hover {
  background: #ffa500;
}

[AlexKuskov]

@akshay27395, looks like /deep/ is deprecated (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). You can try to use ::ng-deep instead:

.my-pagination::ng-deep .ngx-pagination .current {
  background: #0b3c6d  !important;
 
}

[michaelbromley]

I guess this is due to the encapsulation that Angular applies to the styles.

You could try something like:

.bulkResults pagination-controls /deep/ .ng2-pagination li {
 // your styles...

The /deep/ selector tells Angular to “reach in” to the component and apply styles to that too.