[Error] React does not recognize the `isActive` prop on a DOM element.

 
 

styled-components로 생성한 요소에 prop으로 전달한 isActive 에서 아래와 같은 에러가 발생했다.

읽어보면 React가 DOM 요소에서 isAcitve prop을 인식하지 못했으며, 의도적으로 custom attribute 을 나타낸 것이라면 소문자로 표시하라는 의미이다. 하지만 나는 prop을 카멜케이스로 작성하고 싶었고 해결 방안을 styled-components 공식문서에서 찾았다.
 
transient props를 이용하면 이를 해결할 수 있다.
 
transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 렌더링 되는 것을 방지하게 해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다.
 

<StyledNavLink
  to="/fleamarket"
  $isActive={pathname === "/additem" ? true : false}
>

const StyledNavLink = styled(NavLink)`
  font-size: 18px;
  font-weight: 700;
  line-height: 21.48px;
  color: ${({ $isActive }) => $isActive ? 'var(--main-color)' : 'var(--nav-text-color)'};
  margin-left: 47px;
`;

 
 
 
 
참고
https://styled-components.com/docs/api#transient-props
https://stackoverflow.com/questions/57586654/styled-component-attrs-react-does-not-recognize-prop