styled.button처럼 실제 DOM 태그를 기준으로 기본 스타일을 선언합니다.
css in js basics
styled-components는 props로 스타일 변형을 컴포넌트 계약에 묶는다
styled.button, props 기반 조건, as prop, 확장을 사용하면 스타일 규칙과 사용 가능한 변형을 컴포넌트 API로 표현할 수 있습니다.
primary, size, disabled 같은 props가 색상과 간격 변형을 결정합니다.
as prop은 태그만 바꾸고, styled(기존컴포넌트)는 시각 규칙을 확장합니다.
styled-components 설치와 import 위치를 확인합니다.
props 이름은 UI 의미를 드러내게 제한합니다.
반복 스타일은 공통 styled 컴포넌트로 올립니다.
as로 접근성과 실제 태그 의미가 깨지지 않는지 봅니다.