[React] styled-component 사용해서 html body 왼쪽 여백 없애기

문제 상황

컴포넌트의 위치를 left:0으로 지정해줬음에도 불구하고, 왼쪽 여백이 없어지지 않는 문제가 발생하였다. 이건 body 전체의 margin과 padding 값을 0으로 지정해주면 되는데, 현재 프로젝트의 경우 styled-componet를 사용하고 있었기 때문에, styled-component를 사용하여 body 스타일을 정해줄 수 있는 방법을 알아보았다.

 

 

 

 

---

GlobalStyle 지정해주기

GlobalStyle.js 파일을 따로 생성해서 body 스타일을 지정해주면 된다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    body {
        margin: 0;
        padding: 0;
    }
`;

export default GlobalStyle;

그 다음에는 App.js 에 GlobalStyle을 import 해주면 된다.

import AppRouter from "./components/Router";
import GlobalStyle from "./GlobalStyle";

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

export default App;

---

참고한 글

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?

https://kukie.net/remove-spaces-in-html-document/

HTML 파일의 여백 없애기 – kukie