SwiperJS styling does not work with NextJS

Question

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?

Answer 1

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

Answer 2

Assuming the css class names are correct, change the order of your imports

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import styles from './slider.module.scss'

Answer 3

For me, it is solved by changing

import "swiper/css";

to

import "swiper/swiper.min.css";