Styled Component 사용 시 Props 때문에 발생하는 DOM property 문제

[seongbin9786]

1. Styled Component에 전달하는 prop은 무조건 감싸는 dom element로 전달됨 (ex: div, a 등)

2. 이 때 오류가 발생하게 되는데 크게 두 가지임

2-1. prop의 value로 boolean값이 전달되는 경우 - true/false로 Warning

• 처리방법: ismobile={ismobile ? 'ismobile' : undefined} // true일 때 다른 값으로, false일 때 undefined로

2-2. prop이 DOM element가 받을 수 있는 속성이 아닌 경우 - 아예 DOM에 써버리고 말자

• 처리방법: ismobile={ismobile ? 'ismobile' : undefined} // 값을 String으로 줌

[seongbin9786]

styled component의 repository에선 해결 방법이 안나오는 상황인 듯

참고: styled-components/styled-components#305

[seongbin9786]

StackoverFlow의 비공식 해결 방법 참고: https://stackoverflow.com/questions/49834251/how-to-extend-styled-component-without-passing-props-to-underlying-dom-element 되는지는 모르겠음.