Root div padding React (Styled Components) - css

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;
}
`;

Answer 2

Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;

Answer 3

For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs

Answer 4

In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.