styled-components와 typescript로 조건주기

styled-components를 사용하면서 느낀 편리한 점 중 하나는 props를 전달해서 바로바로 조건에 따른 레이아웃을 적용할 수 있다는 점이었다.

props 전달하기

• React에서 컴포넌트간에 props를 전달하는 것과 같다.
  (React와 TypeScript 사용)
  <Component props={props}></Component>

props 받기 & 쓰기

const Component = styled.element<{prop:type}>``

• 조건에 따른 코드를 작성하고 싶다면 삼항연산사를 사용한다. (또는 &&)

예시

const [isToggleOpen, setIsToggleOpen] = useState(false);

const SelectBox = Styled.div<{ isToggleOpen: boolean }>`
  display: ${props => (props.isToggleOpen ? 'block' : 'none')};
`;

return <SelectBox isToggleOpen={isToggleOpen} />