Styled components로 css를 적용하면 더 편리하다!

styled components 가 없으면 global style을 styles.css로 넣거나, css 모듈을 만들거나, 태그에 직접 style을 적용해주어야 한다. 

 

그러나 styled components를 사용하면 더 편리하게 style을 적용할 수 있다.

 

우선 

npm i styled-components

를 통해 설치해준다.

 

다음으로 app.js에서 styled components를 import 해준다.

import styled from "styled-components";

그런 다음에 요소별로 다음과 같이 스타일을 적용한다.

styled.태그명

반드시 유효한 태그명이어야 한다.

const Box = styled.div`
	background-color: red;
    width: 100px;
    height: 100px;
`

styled.div`` 백틱 사이에는 css 문법과 동일하게 적는다.