styled components prop

function() {
	return 
  		<div>
        	<MyButton result={'조건' ? true : false}>버튼</MyButton>
        </div>
}

const MyBtton = styled.button`
	color: ${prop => prop.result ? blue : red}
	// or
	color: ${function(prop) {
    	if(prop.result) {
        	return yellow
        }
    }}
	// 안쪽에 함수를 넣을수 있다.
`;

styled components에 prop으로 result를 주었고, 조건에 따라 true, false가 결정된다.
true면 prop.result의 값이 true가 되어서 파란색 버튼이 생성된다.

예전에 이와 같은 내용의 글을 읽었었다. 하지만 그때는 그저 읽고 말아서 이러한 기능이 있다는 것을 잊고 있었다.
그래서 원하는 기능을 구현해내기 위해 끙끙대고 있었는데 다른분의 코드를 읽고 이러한게 있었다는것을 꺠달았다. 역시 코드는 눈이 아닌 손으로 해야하는것 같다