props
상태 기반 스타일
primary, size, color 같은 값으로 한 컴포넌트의 시각 상태를 조절한다.
사용 흐름
styled
props
as
extend
const BaseButton = styled.button`padding: 10px 20px;`
const PrimaryButton = styled(BaseButton)`background: blue;`
<BaseButton as="a" href="#">link</BaseButton>
변형 책임
as prop
태그 의미 변경
버튼처럼 보이지만 링크로 렌더링해야 할 때 스타일은 유지하고 HTML 의미를 바꾼다.
extend
기본 스타일 재사용
BaseButton의 간격과 크기를 공유하고 색상, 테두리, 상태만 덧붙인다.
rule
팀 기준 고정
props 이름, 테마 토큰, 확장 가능한 기본 컴포넌트를 미리 정한다.