Styled-components

#styled-components는?

• 컴포넌트를 만드는 기술이다.
• 컴포넌트를 만들면서 css를 깔끔하게 사용할 수 있도록 한다.
• jsx가 아닌 익숙한 문법의 css를 작성할 수 있다는 장점이 있다.

#사용법

• styled.button → 상위 태그가 button인 컴포넌트가 생성된다. div를 넣으면 상위 태그가 div인 컴포넌트가 된다.

import styled from 'styled-components';

cosnt SimpleButton=styled.button`
	css~~~
`;

• styled(SimpleButton) : 이렇게 어떤 컴포넌트를 인자로 받아서 생성하면, 해당 컴포넌트를 감싸는 컴포넌트가 만들어진다.
• prop을 사용해서 다른 css를 적용할 수 있다. (${}를 사용하여 함수를 넣을 수 있다.)

<PrimaryButton primary>primary</PrimaryButton>

const PrimaryButton=style.button`
	color:${fuction(props){ //prop인 primary의 값에 따라 흰색or검정색
		if(props.primary){
			return 'white';
		}else{
			return 'black';
		}
	}};
`;

 

출처 : 생활코딩