styled-components

styled-components는 css문법을 사용하면서 결과물을 스타일링한 컴포넌트 형태로 만들어주는 오픈소스 라이브러리이다.

설치하기

npm을 사용하는 경우 npm install --save styled-components
yarn을 사용하는 경우 yarn add styled-components

사용법

var number = 20; 이는 숫자리터럴이다. 오른쪽에 있는 것을 literal이라고한다.
스타일컴포넌트는 literal이 템플릿형태인 template literal이다.

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
	padding: 1em;
	border:1px solid red;
`;

props사용하기

조건이나 동적으로 변하는값을 스타일링할떄 props를 사용한다.

import React from "react";
import styled from "styled-components";

const Button = styled.button`
	color:${props => props.dark ? "white" : "black"};
	background:${props => props.dark ? "black" : "white"};
`;

const Sample = (props) => {
  <Button dark>버튼</Button>
};

확장하기

다른 컴포넌트를 확장하여 사용

import React from "react";
import styled from "styled-components";

const Button = styled.button`
	color:red;
	background:white;
`;
const StyledButton = styled(Button)` 
	color:orange;
`;

const Sample = (props) => {
  <Button>버튼</Button>
  <StyledButton>버튼</StyledButton>
};