styled-components

class 선언없이 컴포넌트에 직접 장착한다. CSS IN JS

 

import styled from 'styled-components'; // import 해와야 한다

 

 

 

 

 

 

컴포넌트에 직접 스타일 넣어서 스타일링하기

 

let 박스 = styled/div	`
	padding : 20px;
`

 

이렇게 백틱 안에 스타일 선언한다.

 

 

 

 

 

 

 

css 를 미리 입혀놓은 컴포넌트... className 작명이 필요 없다.

 

let 제목 = styled.h4`
	font-size: 25px;
`;




<박스>
<제목>상세페이지</제목>
</박스>

 

h4 태그에다가 적용하는 방법이다.

 

 

 

 

 

 

 

다른 컴포넌트에 전파될 실수를 방지한다.

 

let 제목 = styled.h4`
	font-size: 25px;
    color: ${ props => props.색상 }
`;




<박스>
<제목 색상='red'>상세페이지</제목>
</박스>

 

`글자 $ {변수명} 글자`