[리액트] styled components

프로젝트 경로 내에 styled components 설치.

 

터미넬에

yarn add styled-components

 

프로젝트 안에 설치해야 dependencies 안에 설치가 됨

설치가 완료되면, js파일에 import 를 해줌.

그리고 styled components 객체를 만들어줌. 난 클래스 밖에 만들어 보았음. 주의점! 반드시 변수명 첫글자는 대문자로!

styled.HTML태그``

백틱 안에 css 코드를 작성할거임. 

MyStyled라고 만든 객체를 마치 HTML태그처럼 사용. 그리고 매개변수를 넘겨줄 수도 있음. bg_color 라는 변수면에 false라는 값을 넘겨주면, 

이런식으로 코드를 작성하는 것도 가능. 주의할 점은 ${(props) => { }} 중괄호를 쓰는 것이 아니라 ${(props) => ( )} 소괄호를 써야한다는것!