emotion에 props 던지기

emotion 으로 만들어진 태그에도 props를 전달할 수 있습니다.

예를들어, 아래와 같이 emotion으로 만들어진 태그가 있습니다.

//부모
	 <YellowButton isActive={props.isActive}>
       버튼입니다.
      </YellowButton>

//자식
export const YellowButton = styled.button`
  background-color: yellow;
`;

이 태그에 props를 전달하기 위해선 어떻게 해야 할까요?

export const YellowButton = styled.button`
	background-color: ${(props) => (props.isActive ? "yellow" : "")};
`;

이렇게 ${() => ()} 를 사용하여 함수의 형태를 만들어 줄 수 있습니다.

즉, 특정 태그에서 이벤트가 일어나는 경우, props를 활용하여 CSS를 변경할 수 있습니다.