styled-components: it looks like an unknown prop 에러 해결하기

타입스크립트 + 스타일컴포넌트를 쓰는 도중 워닝이 떴다. 해결 해주지 않아도 코드 실행은 되지만 보기 싫기 때문에 워닝을 없애는 방법을 찾아보았다.

<IdInputValid idValid={idValid}>아이디를 입력해주세요.</IdInputValid>

const IdInputValid = styled.p<{ idValid: boolean }>`
  color: #ff0000;
  font-size: 1.2rem;
  opacity: ${(props) => (props.idValid ? 0 : 1)};
`;

idValid라는 props를 스타일 컴포넌트로 보내주고 있었는데 이 부분이 dom입장에서는 속성처럼 받아들일 수 있다는 경고였다. 그래서 이 경고를 해결하는 방법은 props 앞에 달러 기호를 붙여주는 것이다.

 <IdInputValid $idValid={idValid}>아이디를 입력해주세요.</IdInputValid>
 
 const IdInputValid = styled.p<{ $idValid: boolean }>`
  color: #ff0000;
  font-size: 1.2rem;
  opacity: ${(props) => (props.$idValid ? 0 : 1)};
`;

경고가 뜨더라도 프로그램이 돌아가기때문에 그냥 두곤 했었는데 이제는 하나씩 해결하고 방법을 알아보려고 노력해야겠다. 조금씩 더 성장하는 나를 위해..!