[TypeScript] 타입스크립트 styled-components props 사용하기

---

styled-components 설치

npm i styled-components

---

타입스크립트일 경우 추가 설치

npm i -D @types/styled-components

---

props 전달

• props로 animation 실행 딜레이를 다르게 준다.

const Answer = () => {
  return (
    <Input delay={100}/>
    <Input delay={300}/>
    <Input delay={500}/>
  );
};
export default Answer;

---

1. 단일 props 사용시

   const Input = styled.input<{ delay: number }>`
    animation-delay: ${(props) => props.delay}ms;
   `;
   

2. 다수 props 사용시

   interface Container{
     delay:number;
     check:boolean;
   }
   const Input = styled.input<Container>`
    ${(props)=>props.check&&css`
        animation-delay: ${(props) => props.delay}ms;
    `}
   `;
   

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.