설치

npm install --save styled-components

// styled-components 라이브러리에서 import 해온 styled라는 객체를 이용합니다.
// 아래와 같이 h1 태그를 만들어 Title이라는 스타일드 컴포넌트를 만들 수 있습니다.
import styled from 'styled-components'
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
// html 태그 이름 뒤 Tagged Templete 문법을 활용해 CSS 속성을 정의하고 있습니다
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

공식문서

• Automatic critical CSS

• No class name bugs

• Easier deletion of CSS

• Simple dynamic styling

• Painless maintenance

• Automatic vendor prefixing

고유한 클래스 명을 자동으로 생성하여 서로 다른 스타일이 전역에서 중복 적용될 우려를 줄여줍니다.