[SOLVED] SwiperJS styling does not work with NextJS

SwiperJS styling does not work with NextJS

I've installed SwiperJS into my NextJS project. I've following exactly the Swiper Tutorial Documentation but there's an issue when I try to styling classes like .swiper, .swiper-slide ... The styles are not responding to my custom styles.

In my case, my slider is a Component and there is a folder called Slider with index.tsx file and slider.module.scss.

My index.tsx:

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 (
    <div className={styles.teste}>
      <Swiper
        className={styles.mySwiper}
        modules={[Navigation, Pagination, Scrollbar]}
        spaceBetween={50}
        slidesPerView={3}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
      >
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
      </Swiper>

    </div>

  )
}

My slider.module.scss:

.teste {
  background:  blue; //works

  .mySwiper {
    background: red; //works

    .swiper {
      background: yellow; // doesn't work
    }

    .swiper-slide {
      display: none; // doesn't work
    }

  }
}

What I'm missing?

Solution

Solved. I inserted the swiper styles classes at my main styles global.scss and worked. Thank you guys!