[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)

🎯 Styled-Components 전역 스타일링 (Global Style) & styled-reset & ThemeProvider

• createGlobalStyle
  • Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다.
  • 여러 컴포넌트에 걸쳐 공통된 css를 작업할 때 사용한다.
• styled-reset
  • 프로젝트 시작할 때 css 초기화를 위해 Normalize 파일을 사용해본 경험이 있을 것이다.
  • 이러한 부분을 npm으로 다운로드하여서 손쉽게 리액트에 적용할 수 있다.
• ThemeProvider
  • Context API 기반으로 이루어진 Styled-Component에서 제공하는 Theme Provider이다.
  • themeProvier로 감싼 Component들은 theme 정보를 props형태로 넘겨받아서 사용할 수 있다.
  • 즉, 최상위 컴포넌트로 ThemeProvider를 감싸줘서 모든 하위 컴포넌트에서 제공하는 것이다.
• Styled-Components의 createGlobalStyle, ThemeProvider와 styled-reset를 함께 사용하면 초기 css 세팅을 수월하게 할 수 있다.

 

📝 GlobalStyles.js

📕 createGlobalStyle import 해주기

import { createGlobalStyle } from "styled-components";

 

📕 GlobalStyles 생성 (src/styles/GlobalStyles.js)

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
    // 적용시킬 css 입력
    a{
        text-decoration: none;
        color: inherit;
    }
    *{
        box-sizing: border-box;
    }
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
    a, dl, dt, dd, ol, ul, li, form, label, table{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 10px;
        vertical-align: baseline;
    }
    body{
        line-height: 1;
        font-family: 'Noto Sans KR', sans-serif;
        background-color: #F6F9F0;
        margin-bottom: 100px;
    }
    ol, ul{
        list-style: none;
    }
    button {
        border: 0;
        background: transparent;
        cursor: pointer;
    }
`;

export default GlobalStyles;

 

📕 최상위 컴포넌트에 적용

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

ReactDOM.render(
  <div>
    <GlobalStyle />
    <App />
  </div>,
  document.getElementById("root"),
);

 

📝 styled-reset 적용하기

📕 styled-reset 설치

npm install styled-reset 

 

📕 styled-reset 추가

import reset from "styled-reset";

• import 해주기

 

🛠 src/styles/GlobalStyles.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
    ${reset}
    a{
        text-decoration: none;
        color: inherit;
    }
    *{
        box-sizing: border-box;
    }
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
    a, dl, dt, dd, ol, ul, li, form, label, table{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 10px;
        vertical-align: baseline;
    }
    body{
        line-height: 1;
        font-family: 'Noto Sans KR', sans-serif;
        background-color: #F6F9F0;
        margin-bottom: 100px;
    }
    ol, ul{
        list-style: none;
    }
    button {
        border: 0;
        background: transparent;
        cursor: pointer;
    }
`;

export default GlobalStyles;

• 아까 생성해준 파일 아래 ${reset};만 추가해주면 적용된다.

 

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

ReactDOM.render(
  <>
    <GlobalStyle />
    <App />
  </>,
  document.getElementById("root"),
);

 

📝 ThemeProvider

📕 import 해주기

import { ThemeProvider } from "styled-components";

 

📕 ThemeProvider 컴포넌트를 가장 상위 컴포넌트 감싸주기

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

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

 

📕 them.js 생성

🛠 src/styles/theme.js

const size = {
  tablet: "640px",
  laptop: "1200px",
  desktop: "1800px",
};

const theme = {
  mainColor: "#6ABD8C",
  mainColorLight: "#CCDFB0",
  backgroundColor: "#F6F9F0",
  darkGray: "#595959",
  lightGray: "#939292",
  superLightGray: "#F1F2F5",
};

export default theme;

 

📕 사용법

 color: ${(props) => props.theme.darkGray};

• props.theme.설정값 이렇게 사용하면 된다.

 

🏷 요약

🛠 src/styles/GlobalStyles.js

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle`
    ${reset}
    a{
        text-decoration: none;
        color: inherit;
    }
    *{
        box-sizing: border-box;
    }
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
    a, dl, dt, dd, ol, ul, li, form, label, table{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 10px;
        vertical-align: baseline;
    }
    body{
        line-height: 1;
        font-family: 'Noto Sans KR', sans-serif;
        background-color: #F6F9F0;
        margin-bottom: 100px;
    }
    ol, ul{
        list-style: none;
    }
    button {
        border: 0;
        background: transparent;
        cursor: pointer;
    }
`;

export default GlobalStyles;

 

🛠 src/styles/theme.js

const size = {
  tablet: "640px",
  laptop: "1200px",
  desktop: "1800px",
};

const theme = {
  mainColor: "#6ABD8C",
  mainColorLight: "#CCDFB0",
  backgroundColor: "#F6F9F0",
  darkGray: "#595959",
  lightGray: "#939292",
  superLightGray: "#F1F2F5",
};

export default theme;

 

🛠 src/index.js

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

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

 

📌 참고

• Styled Components 전역 스타일링 (Global Style)
• styled-components: API Reference
• styled-components: API Reference
• styled-reset
• Styled-Components 에서 createGlobalStyle 사용하기
• React Global Style 설정
• ThemeProvider 사용하기(1) - 기본 문법