Styled-Component : $prefix

Erro

StyleSheetManager shouldForwardProp={...}>(connect an API like @emotion/is-prop-valid)
or
consider using transient props ($ prefix for automatic filtering.)

<StLayoutFooStrong underline='true'> 
    // underline을 props로 전달하여, 
   //  StLayoutFooStrong이라는 태그들 중 선택적으로 underline을 쳐주려고 함
</StLayoutFooStrong>

export const StLayoutFooStrong = styled.strong`
  color: #fff;
  text-decoration: ${(props) => props.underline && `underline`};
  letter-spacing: -0.01rem;
`;

그러나 console 창에서 노란색 문구로 shouldForwardProp={...} 이걸 쓰거나

transient props ($ prefix for automatic filtering.), 앞에 $ prefix를 사용 하라고 한다.

Why-

참고 OKKY

스타일링 컴포넌트에 props를 true, false를 주면 DOM의 요소(태그)의 속성값에도 전달이 된다고 한다.

예를 들면

const StyledInput = styled.input`
  border : ${props => props.error ? '1px solid red' : '1px solid green'};
`
<StyledInput error={true} />

위와 같이 error라는 prop을 스타일링에만 조건부로 적용 되는 것이 아니라

Browser상까지 나아가면

<input  error="true">

error가 input의 attribute로 들어가게 된다.

Solution

그러므로 styled-component만의 props를 사용하려면

가장 쉬운

$ prefix를 이용하여

Styled-Components 상에서 $prefix를 필터링 해서 기본이 되는 DOM으로 프랍을 전달하지를 않게 된다고 한다.

<StLayoutFooStrong $underline='true'> 
    // underline을 props로 전달하여, StLayoutFooStrong이라는 태그들 중 선택적으로 underline을 쳐주려고 함
</StLayoutFooStrong>

export const StLayoutFooStrong = styled.strong`
  color: #fff;
  text-decoration: ${(props) => props.$underline && `underline`};
  letter-spacing: -0.01rem;
`;