title: SwiperJS - How do you style the Pagination Bullets?
body: <p>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.</p>
  <p>In the <code>pagination:</code> param within ...
  Every time I change the <code>el: </code> param, the pagination just disappears.
  Every time I change the <code>bulletClass:</code> the styles I add in my css doesn't get applied.</p>
  <pre class="lang-js prettyprint-override"><code>import { Swiper, SwiperSlide } from 'swiper/react';
  import SwiperCore, { Pagination, Navigation, A11y } from 'swiper';
  import 'swiper/swiper-bundle.css';
  SwiperCore.use([Navigation, Pagination, A11y]);
  
  return (
  &lt;&gt;
  &lt;Swiper
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{
         clickable: true,
         el: `swiper-container swiper-container-testClass`,
         bulletClass: `swiper-pagination-bullet swiper-pagination-testClass`
      }}
      wrapperTag='ul'
  &gt;
      &lt;SwiperSlide tag='li' key={1}&gt;
          {&lt;div&gt;My Data&lt;/div&gt;}
      &lt;/SwiperSlide&gt;
  &lt;/Swiper&gt;
  &lt;/&gt;
  )
  </code></pre>
  <p>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).</p>
  <p>API in question: <a href="https://swiperjs.com/react/" rel="nofollow noreferrer">Swiper React</a></p>