[React] styled-components

사용법

import styled from "styled-components"

를 통해 styled-components 라이브러리를 불러 올 수 있다.

문법

const 태그 명 = styled.속성`
	스타일 지정
`

• const : 상수로 지정해야한다.

• 태그 명 : 첫글자는 대문자, 두단어 이상으로 이름을 정하는 경우에는 카멜케이스로 작성해야 한다.
  ex) Title, TitleContainer

• 속성

  • 글자: p
  • 영역: div
  • 버튼: button
  • h1: h1
  • 사진: img

• 백틱(``)으로 감싼다.

왜 쓰나요?

(스타일드 컴포넌트의 좋은점들~)

• CSS 파일을 따로 안 만들어도 됨
  = 굳이 css파일 임포트 할 필요 없음
• 따로 class 를 지정할 필요없이 태그명으로 바로 사용할 수 있음
• 오버라이딩 가능

오버라이딩 가능

const 태그명 = styled.(부모태그명)`
    자식 스타일 지정
`