styled-components

styled-components

js파일 안에 다 집어넣고 싶다.

import styled from ‘styled-componets’

장점 1. CSS파일을 안열어도 된다.

let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 10px;
`

장점 2. 스타일이 다른 js파일로 오염되지 않음

→ 그 페이지에 사용된 것은 그 페이지에서만 사용이 가능

오염 방지하려면

컴포넌트.module.css 라고 지으면 된다.

→ 컴포넌트의 스타일에 종속되게 할 수 있다.

ex) App.module.css 면 App에 종속됨

장점 3. 페이지 로딩 시간 단축

장점4. 기존의 스타일 복사 가능

let YellowBtn = styled.button`
background : ${ props => props.bg};
color : ${props => props == 'blue' ? 'white' : 'black'};
padding : 10px;
`

단점1. JS파일 매우 복잡해짐

1. 중복스타일은 컴포넌트간 import할텐데 css와 다를바가 없음
2. 협업시 css 담당의 숙련도 이슈