styled-components 입문

styled components

---

css를 미리 입혀놓은 컴포넌트. className을 작명 하지 않아도 되지만, components를 만들때 html 요소와 css style을 그대로 붙이는 형태이기에 실수를 줄일수는 있지만, 아직 관리하는 css요소가 적어서 그런지 편리함을 느낄수는 없었다.

---

설치

1. npm add install styled-components
2. import styled from 'styled-components'

---

style component 생성 방법

const box = styled.div `
padding : 20px;
`; 

백틱을 사용한다

---

유사한 스타일컴포넌트를 여러개 만들때에는 props를 이용한다

let title = styled.h4`
font-size : 1.6rem;
color : ${ props => props.sekkal }
`;

이후 component 배치 시 props 입력한다

ex ) <title sekkal = "blue">blar blar</title>