styled-components html이나 body tag에 스타일 적용하기

웹 애플리케이션 전체에 공통 스타일을 적용해야할 때, styled-components의 createGlobalStyle()을 사용하면 된다. 

 

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

 

 

styles.tsx

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
#root,
html,
body {
    width: 100%;
    height: 100%;
    background: #303030;
}
`

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { GlobalStyle } from 'styles';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <BrowserRouter>
    <GlobalStyle />
  </BrowserRouter>
);

 

참고 : https://stackoverflow.com/questions/46760861/styled-components-how-to-set-styles-on-html-or-body-tag

styled-components - how to set styles on html or body tag?