Styled-Components란

1. 스타일드 컴포넌트(Styled Components)

 

- 자바스크립트 파일 안에서 스타일 작성할 수 있게 해주는 css in js 라이브러리

- 컴포넌트 단위로 스타일 작성 할 수 있어서 관리 편함

 

 

2. 설치 방법

npm install styled-components // 설치
import styled from 'styled-compoent' // import

 

3.  Vscode-styled-components

- css작성 시 자동완성이 가능하게 해준다.

 

4. 기본문법

import styled from 'styled-components'

const Cola = styled.div`
	background-color: #3498db;
    color: white;
    padding: 10px;
`

function App() {
	return <Cola> Coca </Cola> // 스타일을 컴포넌트로 사용가능
  }

이런식으로 변수를 선언한 뒤 styled.요소 뒤에 백틱(``)을 작성하고 그 안에 설정하고 싶은 스타일 값들을 입력하면 된다.