styled-components transient props

문제

vercel에 배포를 했는데 내가 원하는 css가 보이지 않고 새로고침 후에 보인다.

뭐가 문제일까 고민했지만 콘솔에 warning이 떠 있어서 그것부터 해결하려고 했다.

개발환경에서 확인해 보니 http 첫번째 응답에서만 에러가 나오는걸 볼 수 있었다.

 

styled-components: it looks like an unknown prop "rarity" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)

 

transient props를 사용하라고 한다.

 

원인

오류의 원인은 내가 styled-components에서 정의한 props인 rarity와 active 같은 값들이 DOM 요소로 전달되었기 때문이었다.

당연히 DOM에는 그러한 속성이 없기 때문에 React에서 DOM을 빌드할때 문제가 생겨 원하는 결과물이 나오지 않은 모양이다.

 

해결

내가 styled-components에서 정의한 props인 'rarity'와 'active' 앞에 '$'를 붙여주면 styled-components가 해당 변수를 DOM으로 넘어가지 않게 한다고 한다.

이는 javascript 문법이 아니라 styled-components 내에서 약속인듯 하다.

 

❌

const ShiningBtn = styled.button<{ rarity: Rarity; active: boolean }>`

 

✅

const ShiningBtn = styled.button<{ $rarity: Rarity; $active: boolean }>''

 

 

참고 - https://styled-components.com/docs/faqs#transient-props-since-51