styled-components에서 사용할 기법

@2023/10/21

안녕하세요 lika-7입니다

오늘은 styled-components에서 사용할 기본적 기법을 정리하였습니다

주요 기법 2가지

props로 스타일 선택 하기

props를 통해 받은 데이터를 기반으로 컴포넌트의 스타일을 선택 할 수 있습니다.

위의 예제는 primary 상태 일 때 버튼의 스타일을 바꿔주는 코드 입니다.

$primary props가 true 일 때 background 와 color 색을 바꾸어 줍니다

스타일의 확장

컴포넌트를 이용할 때 전체 부분이 아닌 한,두가지 부분의 스타일만 바꾸고 싶을 때가 있습니다. overriding을 이용해 쉽게 컴포넌트의 스타일을 바꿀수 있습니다.

위의 코드에서 TomatoButton은 Button과 닮은 것을 볼 수있습니다.

TomatoButton에 Button 스타일을 불러와

Button의 구성에 새로운 두가지 rule만 추가하여 새로운 스타일을 override 하여 작성합니다

위의 2가지 내용을 가지고 react 컴포넌트의 기본적인 스타일을 작성할수 있습니다.