[styled-components] styled-components 재사용 & props

컴포넌트 확장(재사용)하기 

버튼 하나를 만들어서 그 버튼을 재사용해 글자크기가 다른 버튼을 쉽게 만들기 

const SimpleBtn = syteld.button`
    color:white;
    background-color:green;
`;

const LargeBtn = styeld(SimpleBtn)`
    font-size: 50px;
`;

 

괄호 () 안에  넣어줌으로 재사용 가능 

LargeBtn은 color, background-color를 상속(?) 받게 됨 

 

 

Props 에 따라 다른 컴포넌트 만들기 

const ReactBtn = styled.button`
    color: ${(props)=> props.primary? "white" : "black"}
`;

// 1. <ReactBtn>Normal</ReactBtn>
// 2. <ReactBtn primary>Primary</ReactBtn>

 

1은 primary props가 없으니까 black으로 2는 white로 ~