[Styled Components] 전역 스타일(Global Style)과 기본 스타일(Default Theme) 관리

 

 

 

💜 전역 스타일(Global Style)

GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap");


  *, *::before, *::after {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }

  body {
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

export default GlobalStyle;

 

이렇게 createGlobalStyle() 함수로 생성한 전역 스타일 컴포넌트를 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다.

이 컴포넌트 안에서 font를 @import하고 전역으로 폰트를 적용할 수 있다.

 

// App.jsx

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
  return (
    <>
      <GlobalStyle />
      <BlogPost>
      </BlogPost>
    </>
  );
}

export default App;

 

 

 

 

 

💚 기본 테마(Default Theme)

자주쓰는 기본 색상이나 스타일을 객체로 관리할 수 있다.

 

defaultTheme.js

// DefaultTheme.js

export const theme = {
  color: {
    bgColor: "#242424",
  },
};

값을 정의해 주고,

 

// App.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import GlobalStyle from "./style/GlobalStyle.js";
import { ThemeProvider } from "styled-components";
import { theme } from "./style/DefaultTheme.js";

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

ThemeProvider로 감싸면 내부 어디서든 theme에 정의된 스타일을 꺼내 쓸 수 있다.

background-color: ${(props) => props.theme.color.bgColor};

이런식으로

 

 

끗!