react-slick CSS가 적용안되는 에러

안녕하세요 제로초님 강의 해주신 코드에서 조금 변경하여 진행 중인데  react-slick의  css가 적용이 되지 않는 에러가 발생하여 원인이 궁금하여 질문 남깁니다.(기능은 정상적으로 동작합니다.)

우선 제 생각엔 react-slick 내부적으로 css가 inherit 로 되어있어서 저 부분이 적용안되는 것 같기도하고 사이즈를 Wrapper 높이를 조절해도 해결이 안됩니다. 클래스 네임 보고 하나하나 css 커스텀 해서 적용하면 해결될 것 같은데 에러 발생 원인을 알고싶습니다.

우선 제가 구현하고 싶은 ui는 인스타그램 웹버전 참고해서 비슷하게 만들고 싶습니다. 현재화면과 전체코드 PostImages.js 첨부하겠습니다. 

현재 화면

전체 코드

https://github.com/HomieKim/SNS_Project/tree/master/front

PostImages.js

import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import styled, { createGlobalStyle } from 'styled-components';
import Slider from 'react-slick';


const ImgWrapper = styled.div`
  padding: 16px;
  text-align: center;
  
  & img {
    margin: 0 auto;
    max-height: 750px;
  }
`;
const Global = createGlobalStyle`
  .slick-slide {
    display: inline-block;
    width : 100%;
  }
  .ant-card-cover {
    transform: none !important;
  }
`
const SlideWrapper = styled.div`
  max-height : 800px;
  overflow : hidden;
`;
const PostImages = ({images})=>{
  //const [showImagesZoom, setShowImagesZoom] = useState(false);
  const onZoom = useCallback(()=> {
    //setShowImagesZoom(true);
  },[]);

  const settings = {
    dots: true,
    infinite : true,
    speed: 500,
    slideToShow : 1,
    slideToScroll : 1
  }

  if(images.length === 1) {
    return (
      <>
        <img style={{ maxHeight : 750}} src={images[0].src} alt={images[0].src} onClick={onZoom} />
      </>
    )
  }

  return (
    <div>
      <Global />
      <SlideWrapper>
        <Slider {...settings}>
          {
            images.map((item) => (
              <ImgWrapper key={item.src} >
                <img   src={item.src} alt={item.src} />
              </ImgWrapper>
            ))
          }
        </Slider>
      </SlideWrapper>
    </div>
  )
}

PostImages.propTypes = {
  images: PropTypes.arrayOf(PropTypes.shape({
    src: PropTypes.string,
  })).isRequired,
};

export default PostImages;

좋은 강의 감사합니다!