Emotion에서 스타일에 property 전달하는 법 (조건부 스타일링)

이번에 새로 시작한 프로젝트에서 emotion이라는 스타일링 라이브러리를 써보기 시작했습니다.

일반 css의 클래스 선택자처럼 사용할 수 있어서, 스타일을 적용하는 태그가 무슨 태그인지 알 수 있다는 장점이 있습니다. 물론 styled component처럼 컴포넌트를 만들어서 사용할 수도 있습니다.

styled component에서와 같이 경우에 따라서 스타일링의 일부분만 바꾸고 싶을 수 있는데요. 조건부 스타일링은 emotion 스타일을 함수형으로 정의하여 사용하면 가능합니다.

const style1 =(fontSize)=>{
	return css`
		font-size:${fontSize};
	`;
}

const Component1 =()=>{
	return <div css={style1} fontSize="16px" />
}

이런 식으로 사용하면 됩니다.