External Component를 Styeld Components로 감쌌을 때 에러 해결

[BKJang]

❗️ How did I encounter this issue?

External Component를 styled-componets를 이용해서 styling을 하는 과정에서 넘긴 property를 Styled Component에서 그대로 받아썼다.

그 결과, 다음과 같은 에러가 발생했다.

Warning: React does not recognize the '[프로퍼티 명]' prop on a DOM element.

🔨 What have I tried? How did you finally solve it?

const Input = styled(({ isDirty, ...rest }) => (
  <StyledInput {...rest} />
))`
  ${({ isDirty }) =>
    isDirty &&
    css`
      border: 1px solid rgba(48, 61, 220, 0.25);
      background: rgba(142, 172, 255, 0.07);
    `};
`;

🙏 Reference

• github/styled-components - issue305