💥 문제 발생

Warning: React does not recognize the customStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase customstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Button 컴포넌트에 customStyle이라는 prop을 전달해주는데 위와 같은 에러가 발생했습니다.

React는 DOM 요소에 알려지지 않은 속성을 발견했을 때 이러한 에러를 발생시키는 것 같습니다.
에러메시지에는 customStyle -> customstyle로 수정하라고 명시하고 있습니다.

해결하기

방법 1 - 소문자로 변경(하지만 경고메시지 발생)

위의 경고 메시지대로 소문자로 변경했더니 이번엔 아래와 같은 경고문구가 발생했습니다.

이 경고 메시지는 styled-components 라이브러리가 알려지지 않은 customstyle prop을 DOM 요소에 전달하려고 했음을 나타냅니다. 이것은 React에서도 경고를 발생시키며, styled-components는 이런 상황을 방지하기 위해 두 가지 해결책을 제안하고 있습니다.

1. <StyleSheetManager shouldForwardProp={...}> 를 사용하여 알려지지 않은 props의 자동 필터링을 활성화할 수 있습니다. 여기서 shouldForwardProp 함수는 각 prop에 대해 true나 false를 반환하는 함수로, true가 반환되면 해당 prop이 DOM 요소에 전달됩니다. @emotion/is-prop-valid와 같은 API를 연결하여 사용할 수 있습니다.
2. $ 접두사로 시작하는 props는 자동으로 필터링되어 실제 DOM 요소에 전달되지 않습니다.

방법 2 - props 앞에 $ 붙이기

더이상 에러 메시지가 발생하지 않습니다.