styled-components

css-in-js

즉, js파일 안에 css를 설정할 수 있는 컴포넌트라고 보면 된다.

 

사용법은 아래처럼.

 

App.js

import styled from 'styled-components';

let TestComponent = styled.div`
	font-size : 12px;
    color : #ff0000;
`;

let TestComponentWithProps = styled.h4`
	font-size : 30px;
    color : ${ props.임의의컬러 };
`;

return (
	<TestComponent/>
    <TestComponenet 임의의컬러="#00ff00"/>
)

yarn add styled-components

명령어로 모듈을 설치하고 import한다.

 

대문자로 시작하는 변수를 생성하여 TestComponent 처럼 작성하되, 아래 WithPorps처럼 Props문법을 이용하여 공통된 css를 제외하고 변경 가능하도록 작성할 수도 있다.