Why my react `Carousel` does not render properly?

Question

So I'm using react-multi-carousel and it looks like this:

Carousel component:

import Carousel from 'react-multi-carousel';

const Container = ({movies}: {movies:MovieResults | null}) => {

  const responsive = {
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 6,
      slidesToSlide: 3 // optional, default to 1.
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 4,
      slidesToSlide: 4 // optional, default to 1.
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 3,
      slidesToSlide: 3 // optional, default to 1.
    }
  };

  const few_movies = movies?.results.slice(1,10);

return (
    <div>
      {movies?.results ?
                <Carousel
                swipeable={true}
                draggable={false}
                //showDots={true}
                responsive={responsive}
                ssr={true} // means to render carousel on server-side.
                //infinite={true}
                // autoPlaySpeed={2000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
                >
                    {movies?.results?.map((movie) =>
                      <Link to={`/movie/${movie.id}`} replace style={{ textDecoration: 'none' }}><MovieItem movie={movie} key={movie.id}/></Link>
                    )}
                </Carousel>
                :
                <div>Loading...</div>
      }
    </div>
  )
} 

Styles:

.container{
    @include flex(center, center);
    position: relative;
    flex-wrap: wrap;
    width:100%;
    height:100%;
    z-index: 1;
}

What it looks like in a parent component:

<div className="section mb-3">
            <div className="section__header mb-2">
              <h2 style={{color:"#fff"}}>Now playing movies</h2>
              <Link to="/playing" className="movies_link">Explore all</Link>
            </div>
            {playing ? <Container movies={playing}/> : <div>Loading</div>}
</div>

But I have a problem, when I open the page it can just randomly render in some weird way, here's the screenshot:

It just goes down vertically and other elements are below too, it doesn't happen everytime, but it can happen randomly. So I want to figure out how can I always it in a proper way.

Answer 1

I believe that you forgot to add import 'react-multi-carousel/lib/styles.css'; to your top-level file. E.g: _app.tsx for NextJS.