[React] styled-components 사용하기

리액트 프로젝트에서 CSS 작업을 할 때 여러 가지 방법을 사용할 수 있지만, 그 중 styled-components를 사용하는 방법을 정리해보려고 한다.

 

1. 설치하기

npm install styled-components

 

2. package.json에 추가되었는지 확인

 

3. import 하기

import styled from "styled-components";

 

4. 스타일 설정하기

styled 뒤에 사용할 태그 이름을 붙여주면 된다.

이 때 주의해야 할 점은, 스타일 이름은 무조건 대문자로 시작해야 한다는 것이다. 소문자로 설정하면 스타일로 인식하지 못한다.

let RedRec = styled.div`
  position: absolute;
  ...
`;

 

5. 설정한 스타일을 컴포넌트에 적용하기

        <RedRec>
          ...
        </RedRec>

div 같은 태그 대신, 적용할 스타일 명을 써주면 된다.

 

 

3. styled-components · GitBook