title: SwiperJS styling does not work with NextJS
body: <p>I've installed <code>SwiperJS</code> into my <code>NextJS</code> project. I've following exactly the Swiper Tutorial Documentation but there's an issue when I try to styling classes like <code>.swiper</code>, <code>.swiper-slide</code> ... The styles are not responding to my custom styles.</p>
  <p>In my case, my slider is a Component and there is a folder called <code>Slider</code> with <code>index.tsx</code> file and <code>slider.module.scss</code>.</p>
  <p>My index.tsx:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Image from 'next/image';
  import { Swiper, SwiperSlide } from 'swiper/react';
  import { Navigation, Pagination, Scrollbar } from 'swiper';
  
  import styles from './slider.module.scss'
  
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  
  export function SliderPortfolio() {
    return (
      &lt;div className={styles.teste}&gt;
        &lt;Swiper
          className={styles.mySwiper}
          modules={[Navigation, Pagination, Scrollbar]}
          spaceBetween={50}
          slidesPerView={3}
          navigation
          pagination={{ clickable: true }}
          scrollbar={{ draggable: true }}
        &gt;
          &lt;SwiperSlide&gt;
            &lt;div className={styles.imageContainerNext}&gt;
              &lt;Image
                className={styles.imageNext}
                src={'/images/dribble-mockup.png'}
                alt="Illustration of a person carrying ideas for a professional website design"
                layout="fill"
              /&gt;
            &lt;/div&gt;
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;
            &lt;div className={styles.imageContainerNext}&gt;
              &lt;Image
                className={styles.imageNext}
                src={'/images/dribble-mockup.png'}
                alt="Illustration of a person carrying ideas for a professional website design"
                layout="fill"
              /&gt;
            &lt;/div&gt;
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;
            &lt;div className={styles.imageContainerNext}&gt;
              &lt;Image
                className={styles.imageNext}
                src={'/images/dribble-mockup.png'}
                alt="Illustration of a person carrying ideas for a professional website design"
                layout="fill"
              /&gt;
            &lt;/div&gt;
          &lt;/SwiperSlide&gt;
          &lt;SwiperSlide&gt;
            &lt;div className={styles.imageContainerNext}&gt;
              &lt;Image
                className={styles.imageNext}
                src={'/images/dribble-mockup.png'}
                alt="Illustration of a person carrying ideas for a professional website design"
                layout="fill"
              /&gt;
            &lt;/div&gt;
          &lt;/SwiperSlide&gt;
        &lt;/Swiper&gt;
  
      &lt;/div&gt;
  
    )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>My slider.module.scss:</p>
  <pre><code>.teste {
    background:  blue; //works
  
    .mySwiper {
      background: red; //works
  
      .swiper {
        background: yellow; // doesn't work
      }
  
      .swiper-slide {
        display: none; // doesn't work
      }
  
    }
  }
  </code></pre>
  <p>What I'm missing?</p>