React Styled Component에 대해 알아보자!

npm install --save styled-components 를 설치해줍니다.

Babel 플러그인 도 사용하는 것이 좋습니다 (필수는 아님) . 더 읽기 쉬운 클래스 이름, 서버 측 렌더링 호환성, 더 작은 번들 등과 같은 많은 이점을 제공합니다.

 

styled-components 는 태그가 지정된 템플릿 리터럴을 사용하여 구성 요소를 스타일링합니다.

컴포넌트와 스타일 사이의 맵핑을 제거합니다. 이는 스타일을 정의 할 때 스타일이 첨부 된 일반 React 컴포넌트를 실제로 생성한다는 것을 의미합니다.

이 예제는 래퍼와 제목이라는 두 가지 간단한 구성 요소를 작성합니다.

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

결과

 

 

출처 : https://www.styled-components.com/docs/basics