[React] CSS in JS ( styled-components )

styled-components 라이브러리를 사용하면  className을 선언하지않고 css를 할 수 있다.

 

 

 

설치방법은 터미널창에 npm install styled-components

 

css를 입힌 컴포넌트다.

 

 

 

 

 

 

 

 

js파일에 import 한다

 

사용은 변수로 만들어서 컴포넌트처럼 사용한다.

 

const Box = styled.div`
font-size:300px;
color:red;
`

 

변수명은 대문자로 작성한다.

 

const 변수명 = styled.태그` css `

 

styled.태그의 백틱안에 css을 작성하면 된다.

 

 

 

 

 

작성은 컴포넌트랑 동일하다.

 

 

 

 

 

확장자로 vscode-styled-components를 설치해주면

 

백틱안의 코드들이 css처럼 보기좋게 색이 변하고 자동완성이 된다.