웹 애플리케이션 전체에 공통 스타일을 적용해야할 때, 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?
Ordinarily, when using pure CSS, I have a style sheet that contains: html { height: 100%; } body { font-size: 14px; } When using styled-components in my React project, how do I set style...
stackoverflow.com
'FrontEnd > react' 카테고리의 다른 글
Typescript, MUI (Material UI v5), React hook form 함께 사용하기 (with Generic) (2/2) (0) | 2022.09.04 |
---|---|
Typescript, MUI (Material UI v5), React hook form 함께 사용하기 (with Generic) (1/2) (0) | 2022.09.03 |
CRA 없이 React 프로젝트 구성하기 (0) | 2022.06.25 |
StoryBook 경로 설정하기 (0) | 2022.06.24 |
React 프로젝트 구조화 (0) | 2022.06.13 |