[React] styled-components 사용하기

그동안 각각의 CSS 파일을 밖에 두고 스타일링 했었는데, 하나의 컴포넌트 내에서 이용가능한 styld-components를 사용해보았다. 불필요한 CSS가 import 되지 않도록 만들어주기 때문에 좋다!

 

---

 

styled-components 설치

yarn add styled-components

 

styled-components를 이용한 구현

import styled from 'styled-components';

export const Test = () => {
    render (
        <Wrapper>
            <Button>버튼</Button>
        </Wrapper>
    );
}

const Wrapper = styled.div`
    width: 100%;
    height: 100vh;
`;

const Button = styled.button`
    background-color: gray;
    border-radius: 3px;
`;

 

공식 문서

https://styled-components.com/

styled-components