TIL_Styled Component

React 라이브러리 중 스타일을 가진 컴포넌트를 만들 수록 도와주는 CSS-in-JS 라이브러리이다. 문구 그대로 JS 안에 CSS 를 작성하는 것을 의미한다.

설치

npm install --save styled-components

문법

import styled from "styled-components"

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

• 먼저 설치한 styled-componets 패키지에서 styled 를 import 시켜준다.
• const Wrapper = styled.section``;
  • 대문자 시작으로 스타일드 컴포넌트를 선언한다.
  • styled.(태그)후 Templete Literals 문법으로 css를 작성해준다.