Root div padding React (Styled Components)

Question

I have a simple React App, using Redux's Provider to wrap my App component.

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';

const MainContainer = styled.div`
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: red;
`;

ReactDOM.render(
  <MainContainer>
    <Provider store={store}>
      <App />
    </Provider>
  </MainContainer>,
  document.getElementById('root'),
);

registerServiceWorker();

However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?

Answer 1

That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.

body {
  margin: 0;
  padding: 0;
}

You can do this with injectGlobal.

import { injectGlobal } from 'styled-components';

injectGlobal`
  body {
    margin: 0;
    padding: 0;
  }
`;