[error]Styled-component typescript에서 Props 쓰기

js로 개발할 때는 에러가 안떴는데 ts로 개발하니 못보던 에러가 떴다.

형식에 props 속성이 없다고?

Property 'props이름' does not exist on type.
형식에 'props이름' 속성이 없습니다.

 

해결법

 

단일 props 인 경우에는 

styled.div< {프롭스명 : 타입지정} >

export const LoginButton = styled.div<{ disabled: boolean }>`
  background-color: ${(props) => (props.disabled ? "#b2ddff" : "#2E90FA")};
  cursor: ${(props) => (props.disabled ? "default" : "pointer")};
  `

 

props가 여러개인 경우에는 interface를 사용한다.

interface IBtn {
  submit: boolean;
  pay: string;
}

const BUTTON = styled.button<IBtn>`
  border: 1px ${props => (props.submit ? 'solid' : 'dotted')} yellow;
  background: white;
  color: black;
  font-weight: ${props => (props.pay === "shopping" ? 'bold' : 500)};
`;

 

 

참고사이트

https://www.atatus.com/blog/guide-to-typescript-and-styled-components/#passing-props

Guide to TypeScript and Styled Components