이승준의 개발 블로그 | styled-components 에서 변수 사용법

styled-components 에서 변수 사용법

const Input = styled.input<{ $inputColor?: string; }>`
  color: ${props => props.$inputColor || "#BF4F74"};
`;
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" $inputColor="rebeccapurple" />
  </div>
);

첫번째 줄?는 생략가능하다. 조건부로 변수가 있을 수 있고 없을 수도 있다는 의미이다.