[styled components] transient props

❔문제 상황

styled components에서 props를 넘겨주는 도중 위의 사진과 같은 에러가 발생했다.

컴포넌트

<S.AddRemoveButton
  ref={buttonRef}
  backgroundcolor={isPokemonSelected ? "#008000" : "#FF0000"}
  hoverbackgroundcolor={isPokemonSelected ? "#006400" : "#cc0000"}
  ...

스타일

background-color: ${(props) => props.hoverbackgroundcolor};
...

🔎에러가 나는 이유

구글링해보니 transient props로 $ 접두사를 props 앞에 붙이면 이 props는 styled components의 스타일링을 위해 사용된다 라고 한다. props는 styled component의 스타일링을 위해 사용되고 실제 DOM 요소로 전달되지 않는다.

💡해결

컴포넌트

<S.AddRemoveButton
  ref={buttonRef}
  $backgroundcolor={isPokemonSelected ? "#008000" : "#FF0000"}
  $hoverbackgroundcolor={isPokemonSelected ? "#006400" : "#cc0000"}
  ...

스타일

background-color: ${(props) => props.$hoverbackgroundcolor};
...