style

styled-components 리액트 컴포넌트 스타일링

css, css in js, styled, styled-components
Views: 280

시작하기

styled-components는 리액트 CSS-in-JS 관련 라이브러리입니다.
css를 자바스크립트 파일안에 작성하는 형태입니다.
기존 css의 경우 웹사이트를 불러올때 모든 css 로딩합니다.
하지만 styled-components의 경우에는 컴포넌트가 실행 될때만 스타일을 로드합니다.
사용하지 않는 스타일은 표현하지 않습니다.

설치

npm install styled-components

사용하기

사용법은 css, sass와 비슷합니다.

기본사용방법

App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import styled from 'styled-components';

const Box = styled.div`
    width: 200px;
    height: 200px;
`

const Button = styled.button`
    // 리액트처럼 props를 넘겨줄 수 있습니다.
    color: ${props => props.color};
    padding: 10px;
    background-color: #fff;
`

const Border = styled.div`
    border: 1px solid red;
    /* & 문자를 사용해서 Sass 처럼 자기 자신을 선택할 수 있습니다. */
    &.hover{
        border: 2px solid red;
    }
`

const App:React.FC = () => {
    return (<Box>
        <Button color="black">버튼 입니다.</Button>
        <Border>Border 스타일입니다.</Border>
    </Box>)
}

컴포넌트에 스타일 넣기

1
2
3
4
5
6
7
8
const MyComponent = styled(Component)`
    color: red;
    border: 1px solid red;
`
const MyButton = styled('button')`
    color: red;
    border: 1px solid red;
`

Nested 스타일

내부 스타일을 주고 싶을 경우 사용합니다.
주의 할 점은 내부에 적용할 스타일은 상단에 미리 정의가 되어 있어야 합니다.
아래와 같은 경우 Border가 상단에 정의 되어 있어야 하단에서 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
const Border = styled.div`
    border: 1px solid red;
`
const BorderWrapper = styled.div`
    width: 100px;
    height: 100px;
    ${Border} {
        border: 1px solid yellow;
    }
`

반응형 디자인

기존 미디어 쿼리 사용법과 흡사합니다.

1
2
3
4
5
6
7
8
9
const Wrapper = styled.div`
    border: 1px solid red;
    @media (max-width: 1024px) {
        border: 1px solid blue;
    }
    @media (max-width: 768px) {
        border: 1px solid yellow;
    }
`

styled-components에 대해서 알아 보았습니다.
사용법은 기존 css나 sass와 많이 다르지 않아 사용하기 수월했습니다.

Share