Slider is disabled when styled-components extends "react-slick-slider"

Question

`

import React from 'react';
import Slider from 'react-slick';
import styled from 'styled-components';
import { fireStore } from '../../src/firebase';
import { collection, getDocs, query, where } from 'firebase/firestore';
import { useEffect } from 'react';
import { useState } from 'react';

// Slider setting
const settings = {
  slide: 'div',
  dots: true, 
  rows: 2, 
  slidePerRow: 4, 
  infinite: true, 
  speed: 1000, 
  slidesToShow: 4, 
  slidesToScroll: 4, 
  autoplay: true,
  autoplaySpeed: 7500, 
  vertical: false, 
  arrows: true, 
  dotsClass: 'slick-dots', 
  dragable: 'true', 
};

const StyledSlider = styled(Slider)`
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-around;
  max-width: 1100px;
  min-width: 900px;
  width: 1100px;
  height: 315px;
  margin: auto;

  & img {
    margin-bottom: 10px;
    width: 230px;
    height: 315px;
  }
`;

const Main = () => {
  const itemsRef = collection(fireStore, 'shopping_items');
  const resultQuery = query(itemsRef, where('ITEMS_SHOWMAIN', '==', 'O'));
  const [ItemsList, setItemsList] = useState([]);

  // Loading
  useEffect(() => {
    const TmpItemList = [];
    const getItems = async () => {
      const data = await getDocs(resultQuery);
      data.forEach((doc) => {
        TmpItemList.push(doc.data());
        setItemsList(TmpItemList);
      });
    };
    getItems();
  }, []);

  return (
    <div>
      <MainSlideImage /> 
      <SiteIntroBox /> 
      <h2 style={{ textAlign: 'center' }}>WEEKLY BEST ITEMS</h2>
      <p style={{
          textAlign: 'center',
          color: '#8A8989',
          marginTop: '-5px',
        }}
      >
        BEST 16 ITEMS
      </p>
      <StyledSlider {...settings}>
        {ItemsList.map((ele, idx) => (
          <div key={idx}>
            <Link to="/product">
              <img src={ele['ITEMS_IMGURL']} alt="" />
            </Link>
          </div>
        ))}
      </StyledSlider>
    </div>
  );
};

export default Main;

` enter image description here

It consists of 2 slide screens, and 1 slide screen consists of 2 lines with 4 items per line. I wrote the code like above, and it worked at first. However, when I refresh the page, the slick-slider screen is not visible at all. However, if you check the element tab, it seems that the tag is properly inserted, but nothing is actually displayed on the screen. I would like to ask a question about this strange phenomenon.

Slider is disabled when styled-components extends "react-slick-slider"

0 Answers0