(React) Style-components 간략 활용 예제

Style-components는 컴포넌트와 스타일링을 동시에 해결해 준다.

" use strict ";

function P() {
  return (
    <div>
      <p>컴포넌트 생성!</p>
    </div>
  );
}

// in CSS

p {color: red;}

컴포넌트 생성하고 CSS 파일을 따로 생성해서 스타일링 한 모습.

"use strict";

import styled from "styled-components"; 

const P = styled.p`
  color: red;
`;

function App() {
  return (
    <div>
      <P>스타일 컴포넌트 꿀템!</P>
    </div>
  );

style-components를 import 후에 사용한 모습.