[CSS] prop를 사용한 디자인 적용

 

styled-components에서 prop를 사용하여 스타일링을 하는 법을 알려드리려고 합니다.

 

아래의 예시로 버튼이 두 개가 있는데요.

공통으로 사용되는 기본 구성을 <button>에 설정하였는데요.

스타일이 지정된 구성 요소의 템플릿 리터럴에 함수를 전달하여 props를 기반으로 적용할 수 있습니다.

 

See the Pen Untitled by uxuisooa (@uxuisooa) on CodePen.

 

버튼 구성 요소에는 색상을 변경하는 기본 상태가 있고,

props를 true로 설정하면 배경과 텍스트 색상이 바뀌게 됩니다.