Styled components란

현존하는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘나가는 라이브러리이다.
말 그대로 자바스크립트 안에서 CSS를 작성할 수 있는 형태이다.
리액트에서 컴포넌트를 사용하는 것과 같이 태그로 사용할 수 있고, props를 전달할 수도 있다.
`(백틱)으로 감싸서 사용하여 작성한다.

우선, npm을 통해 라이브러리를 먼저 설치해주고

npm install --save styled-components

styled components를 사용할 위치에 import 해준다!

import styled from "styled-components";

Getting Started

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

styled components를 시작하려면 먼저,
마치 import한 component를 사용할 때 처럼 대문자로 시작하는 component를 만들어준다.

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

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

그리고 클래스형/함수형 바깥에 스타일을 지정해준다.
이 때 생긴 모양이 참 특이한데, 하나씩 알아가보자

const {위에서 지정해준 component명} = styled.{태그명} ``;

스타일을 지정기 위해 위의 예시처럼 tagged template literal를 사용한다.

styled.{태그명} ``; 부분에 해당한다.

Adapting based on props

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const [showBtn, setShowBtn] = useState(true);
render(
  <>
    <div onClick={() => setShowBtn(!showBtn)}>Show?</div>
    <Button show={showBtn}>button</Button>
  </>
);
const Button = styled.button`
  display: ${props => props.show ? "block" : "none"};
`;

이렇게 useState로 관리되는 상태값을 props로 넘겨줄 수도 있다.

Extending Styles

render(
  <>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </>
);

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// styled 의 인자로 Button 이라는 component 자체가 들어옴!
// 이렇게 하면 Button 이라는 태그의 스타일 값 및 태그 속성까지 다 가져올 수 있다!
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Nesting

render(
  <>
    <Thing>Hello world!</Thing>
    <Thing>How ya doing?</Thing>
    <Thing className="something">The sun is shining...</Thing>
    <div>Pretty nice day today.</div>
    <Thing>Don't you think?</Thing>
    <div className="something-else">
      <Thing>Splendid.</Thing>
    </div>
  </>
)

const Thing = styled.div`
  color: blue;

  &:hover {
    color: red;
  }

  &.something {
    background: orange;
  }

  .something-else & {
    border: 1px solid;
  }
`;

Global Style

styled component 를 reser.scss common.scss 처럼 사용하기

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
   Global Style 작성~~
`;

export default GlobalStyle;

GlobalStyle.js 라는 파일에 이렇게 작성하고

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import Routes from "./Routes";
import GlobalStyle from "./styles/GlobalStyle";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={Theme}>
      <GlobalStyle />
      <Routes />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

index.js 에 <Routes /> 위에 <GlobalStyle /> 를 작성해준다.