# React Pagination Component Styling

> Learn how to customize the React Pagination component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

## CSS variables

React pagination uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

```scss
$pagination-tokens: defaults(
  (
    --cui-pagination-min-height: var(--cui-btn-input-min-height),
    --cui-pagination-padding-x: var(--cui-btn-input-padding-x),
    --cui-pagination-padding-y: var(--cui-btn-input-padding-y),
    --cui-pagination-font-size: var(--cui-btn-input-font-size),
    --cui-pagination-color: var(--cui-link-color),
    --cui-pagination-bg: var(--cui-bg-body),
    --cui-pagination-border-width: var(--cui-border-width),
    --cui-pagination-border-color: var(--cui-border-color),
    --cui-pagination-border-radius: var(--cui-btn-input-border-radius),
    --cui-pagination-transition: #{"color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out"},
    --cui-pagination-hover-color: var(--cui-link-hover-color),
    --cui-pagination-hover-bg: var(--cui-bg-1),
    --cui-pagination-hover-border-color: var(--cui-border-color),
    --cui-pagination-focus-color: var(--cui-link-hover-color),
    --cui-pagination-focus-bg: var(--cui-bg-1),
    --cui-pagination-active-color: var(--cui-primary-contrast),
    --cui-pagination-active-bg: var(--cui-primary-bg),
    --cui-pagination-active-border-color: var(--cui-primary-bg),
    --cui-pagination-disabled-color: var(--cui-fg-3),
    --cui-pagination-disabled-bg: var(--cui-bg-2),
    --cui-pagination-disabled-border-color: var(--cui-border-color),
  ),
  $pagination-tokens
);
```

### How to use CSS variables

```jsx
const customVars = {
  '--cui-pagination-color': '#555',
  '--cui-pagination-bg': '#fff',
}

return <CPagination style={customVars}>{/* Pagination content */}</CPagination>
```

## Sass maps

Each entry is one `.pagination-{size}` class, and the map merges with your overrides — add a key to define a size, or set one to `null` to drop it:

```scss
$pagination-sizes: defaults(
  ("sm", "lg"),
  $pagination-sizes
);
```

## Sass loops

Each size remaps the pagination's tokens onto the shared `--cui-btn-input-*` scale, so a new entry in `$pagination-sizes` picks up whatever that scale defines for it.

```scss
@each $size, $_ in $pagination-sizes {
  .pagination-#{$size} {
    --cui-pagination-min-height: var(--cui-btn-input-#{$size}-min-height);
    --cui-pagination-padding-y: var(--cui-btn-input-#{$size}-padding-y);
    --cui-pagination-padding-x: var(--cui-btn-input-#{$size}-padding-x);
    --cui-pagination-font-size: var(--cui-btn-input-#{$size}-font-size);
    --cui-pagination-border-radius: var(--cui-btn-input-#{$size}-border-radius);
  }
}
```