https://styled-components.com/
💁🏻‍♀️ 가장 정리 잘된건 뭐니뭐니 해도 공식 사이트!!

---

2차 프로젝트를 진행하면서 styled components에 대해 공부하고 사용하고 있다!
오늘은 styled components의 몇가지 속성에 대해 정리해보기로!!

우선, 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 /> 를 작성해준다!!

작성중!