how to style pagination using Core UI smart table

Question

I am trying to change the color of pagination buttons using Core UI smart table in Angular. Here is a photo of my code:

Answer 1

Open the tools navigator (F12). Select the active page. Then you can see what class is applied.

You'll see some like: .page-link.active, .active > .page-link { z-index: 3; color: var(--cui-pagination-active-color); background-color: var(--cui-pagination-active-bg); border-color: var(--cui-pagination-active-border-color); }

To override you can create a more specific css class like

.custom-paginator .page-link.active, .active > .page-link {
  z-index: 3;
  color: red;
  background-color: red;
  border-color: red;
}

or, better

.custom .pagination
{
  --cui-pagination-active-bg: red;
  --cui-pagination-active-border-color: red;
}

This .css should be global, so add to your styles.css

Then only add the class to the paginator

<c-smart-pagination class="custom" ...></c-smart-pagination>

NOTE: Please, not post code as images, it's hard to read, no accessible and furthermore, if the image is loosed, the question becomes unintelligible