STUDY/typescript

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

3급우사기 2024. 3. 11. 11:21

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

Discover how TypeScript and Styled Components can work together to create stunning React interfaces with this practical guide.

www.atatus.com