styled-component(1)

• styled-component 설치 : 해당 프로젝트의 디렉토리에서 실행 

npm i styled-components

• 사용방법 

import styled from "styled-components";

const div = styled.div``;         // back tick (숫자 1 왼쪽 옆에 있는것)을 입력하고 그 사이에 스타일을 작성한다.

const div = styled.div`
    background-color: red;
    width: 100px;
    height: 100px;
`;

• styled-component에 props 전달 

const Div = styled.div`
    background-color: ${(props) => props.bgColor};
    width: 100px;
    height: 100px;
`;

<Div bgColor="red" />

• styled-component 확장 : 기존의 스타일에 새로운 스타일만 추가

const Circle = styled(Div)`
    border-radius: 50px;
`;

• as : 기존의 html 컴포넌트를 다른 컴포넌트로 변경 할 수 있음 

<Div as="a" > test </Div>               // div 태그가 a 태그로 변경 됨 

• attrs : 해당  styled-component의 태그의 속성들을 한번에 정의할 수 있음 

const Input = styled.component.input.attrs({required: true})`
    background-color: red;
`;