본문 바로가기
공부/Web

Web - "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."에러 해결하는 법

by hhhello 2024. 7. 2.

크롬 개발자 도구에서 Console창을 보니까 이런 이상한 에러가 콘솔창을 도배하고 있었다.
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.

customStyle을 React가 못 알아먹고 있으니까 customstyle로 이름을 바꾸라는 소리다. 하지만 소문자로 바꿔도 계속 경고 메세지가 출력된다.

이때는 변수 앞에다가 '$'를 붙이면 문제가 해결된다.

export const Container = styled.div<{
    $customStyle?: RuleSet
}>`
    ${props => props.$customStyle};
    ${FlexLayout({})};
    flex: 1;
`;