styled-components 동적 스타일

styled-components 동적 스타일의 핵심 관계와 선택 기준을 한눈에 연결한다.

1

핵심 1

styled-components 동적 스타일 스타일 prop은 CSS 조건으로 변환되어 컴포넌트 안에 머문다

2

핵심 2

styled-components는 JavaScript 값을 템플릿 안에서 읽어 버튼 색, 텍스트 크기, hover 규칙을 컴포넌트 단위로 묶는다.

3

핵심 3

버튼이면 강조 색을 선택한다.

4

핵심 4

size 텍스트 크기를 props로 받아 CSS font-size에 반영한다.

핵심styled-components 동적 스타일은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.