react-slick CSS가 적용안되는 에러
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 강의 해주신 코드에서 조금 변경하여 진행 중인데 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; 좋은 강의 감사합니다!
- react-slick
- react
- express
- nodejs
- redux
- Next.js