Styled-components props 이용해서 값 바꾸기

props를 이용해서 translate3d 값을 바꾸는 방법

const [slickWidth setSlickWidth] = useState();

const handleSlickWidth = () => {
 setSlickWidth((prevState) => prevState + 700)
}

<ModalWrap slickWidth={slickWidth}>
  // 생략    
</ModalWrap>

const ModalWrap = Styled.div`
// 생략
 transform: ${(props) => `translate3d(${props.slickWidth}px,0px,0px)`};`

onClick으로 함수를 연결해 클릭시마다 transform : translate3d의 값이 700씩 늘어난다.