SwiperJS - How do you style the Pagination Bullets?

Question

Using SwiperJS in my ReactJS application. I've imported the default style bundle, but can't figure out how to style the pagination container or the bullets.

In the pagination: param within ... Every time I change the el: param, the pagination just disappears. Every time I change the bulletClass: the styles I add in my css doesn't get applied.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Pagination, Navigation, A11y } from 'swiper';
import 'swiper/swiper-bundle.css';
SwiperCore.use([Navigation, Pagination, A11y]);

return (
<>
<Swiper
    spaceBetween={50}
    slidesPerView={1}
    navigation
    pagination={{
       clickable: true,
       el: `swiper-container swiper-container-testClass`,
       bulletClass: `swiper-pagination-bullet swiper-pagination-testClass`
    }}
    wrapperTag='ul'
>
    <SwiperSlide tag='li' key={1}>
        {<div>My Data</div>}
    </SwiperSlide>
</Swiper>
</>
)

Anyone know how you can override the default styles? Namely, I'm looking to move the pagination-container above the slide content and not inside the slide at the bottom (can't even see it).

API in question: Swiper React

Answer 1

To style pagination bullets simply add this line to your global CSS

.swiper-pagination-bullet-active {
     background-color: #000 !important;
}

Answer 2

Since there is no info on documentation about these, I've found how, looking into the bundle files.

There you can encounter the variables that can be modified to customize your slider, as follows:

:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}

Just add this variables and set whatever color/size/proprierty you want on your swiper slider.

Ex:

<Swiper style={{
  "--swiper-pagination-color": "#FFBA08",
  "--swiper-pagination-bullet-inactive-color": "#999999",
  "--swiper-pagination-bullet-inactive-opacity": "1",
  "--swiper-pagination-bullet-size": "16px",
  "--swiper-pagination-bullet-horizontal-gap": "6px"
}}>
  {content}
</Swiper>