[2019.07.18] Styled-components 사용법(매우쉬움)

 

엄청나게 간편해진 CSS 적용법!

(이젠 내 인생에 확장자 .css파일을 건들 일은 없을 것 같다..ㅎ 아마도..)

 

$npm i -S styled-components

 

그리고 직접 Component를 만들되, 거기에 style을 입힌다.

import styled from 'styled-components';

const TempSpace = styled.div`
  background-color: white;
  margin: 0 0 10px 0;
`

 

스타일 작업을 위 코드와 같이 입힌 컴포넌트를 생성하여 사용하면 된다 

 

# style에 props 넘기는법 (이부분이 매우 중요!)

해당 컴포넌트에 props를 내려서 style를 변경시킬 수 있다.

예를들어, TempSpace라는 컴포넌트에 check라는 props값이 true면 배경색을 white, false면 black으로 하는 방법을 적용시켜보자.

import styled from 'styled-components';

<TempSpace check={true} />

const TempSpace = styled.div`
  background-color: white;
  margin: 0 0 10px 0;
  ${props=>{
  	return props.check ? 'background-color: white' : 'background-color:black'
  }}
`

 

그럼 check의 값에 따라서 style이 변하게 된다.

 

아래와 같은 방법도 가능하다.

import styled,{css} from 'styled-components';

<TempSpace Check />

const TempSpace = styled.div`
  background-color: white;
  margin: 0 0 10px 0;
  ${props=>props.Check && css 'background-color:black;'}
`

 

최대한 같은 style의 값을 활용하기 위해서 사용하려 하는데, 아직은 그부분이 많이 어렵..ㅜ