styled-components wrapper 컴포넌트에서 자식컴포넌트로 props 전달하기

상황

styled-components wrapper컴포넌트 내에 여러개의 styled-components 컴포넌트들이 존재하는데 이 컴포넌트들에게 동일한 selected라는 props가 전달된다.

const EachOption: React.FC<PropType> = ({
  title, svg, selected, goUrl,
}) => (
  <NavOption onClick={goUrl}>
    <HighlightLine selected={selected}/>
    <Icon as={svg} selected={selected}/>
    <Description selected={selected}>{title}</Description>
  </NavOption>
);

딱봐도 리팩토링 하고싶어지는 코드이다.
사실 처음에는 어느정도 문제있다라는 생각은 들었으나 styled-components에 미숙한 나는 '다 다른 Dom태그에대한 styeld-components인데이게 가능한가...
일반 컴포넌트라면 당연히 props로 전달해서 쉽게 가능할터인데..'
라는 생각으로 그냥 이런식으로 최초에는 제작했다.

좀 styled-components기능을 알아봤어야했다.(구글링하면서...)

문제해결

export const NavOption = styled.button<SelectedPropType>`
    ${HighlightLine}{
      display: ${(props) => (!props.selected && 'none')}; 
    }
    ${Icon}{
      > path {
        stroke: ${(props) => (props.selected ? mainColor : greyFontColor)};
      }
    }
    ${Description}{
      color: ${(props) => (props.selected ? mainColor : greyFontColor)};
    }
`;

Wrapper컴포넌트 내에서 {Child}를 이용해서 Wrapper컴포넌트에서 받은 props를 Child (styled-components)에게 전달할수 있다.

즉, 일반 컴포넌트를 사용할때와 동일한 동작으로 전달할수 있다는 것이다.