시작 전

1. Vscode 마켓에서 리액트 스타일 자동완성 설치하기 ⇒ vscode-styled-components
2. terminal에서 styled-components 설치하기 ⇒ npm i styled-components
3. reset 라이브러리 설치하기 ⇒ npm i styled-reset

사용법

1. styled
2. {css}
3. scss문법 사용 가능
4. {createGlobalStyle}

styled / css / scss문법 사용

예시**)**

src > styles > common.js

import { css } from 'styled-components'

export const flexCenter = css`
	display:flex;
	justify-content: center;
	align-items: center;
`

src > pages > todo > components > title > title.js

import styled from 'styled-components'
import { flexCenter } from '../../../../styles/common'

function todoTitle () {
	return <Wrapper>
      투두리스트 타이틀입니다. <p>남은 할일 <span>0</span>개</p>
    </Wrapper>
}
export default todoTitle;

const Wrapper = styled.div`
	${flexCenter}
	// scss 문법을 사용할 수 있음!
	& > p{
    color: red;
    line-height: 48px;
    & > span{
      display: inline-block;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: aqua;
      text-align: center
    }
  }
`