[React] Styled-component- Global Style 사용하기

 

css 초기화를 위해 styled-reset 설치

 

npm install styled-reset styled-components

 

styled-components는 local로 동작한다. 

개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다.

그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다.

createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다. 

 

 

 

 

 

GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
${reset};

body {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 350px;
    height: 600px;
    
  }
*{
    box-sizing: border-box;
}
`;

export default GlobalStyle;

 

 

App.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import GlobalStyle from "./GlobalStyle";

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

 

App.js 혹은 index.js 등 라우터를 설정해주는 부분에서 GlobalStyle을 불러와 적용 시켜준다.

애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다. 

 

이때 주의해야할점은! 적용하고 싶은 컴포넌트에 감싸는것이 아니라 같은 레벨에다가 두어야 한다. 

<GlobalStyle> 이렇게. 제대로 안보고 감쌌다가 삽질할 뻔했다. ^^;

 

 

 

 

 

참고

 

https://styled-components.com/

https://bigstar-vlog.tistory.com/48