Корневое заполнение div React (стилизованные компоненты)

Question

У меня есть простое приложение React, использующее Provider Redux для упаковки моего App компонента.

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();

Однако при рендеринге этого приложения по краям экрана (со всех сторон) появляется белый промежуток. Как правильно переопределить тег body, чтобы содержимое App доходило до края экрана?

Answer 1

Спасибо за ответы, но я искал конкретный ответ для Styled Components.

Оказывается, что у Styled Components есть вспомогательный метод, injectGlobal, который может переопределять глобальный тег body.

Используя это, можно установить желаемые свойства - в этом случае нет полей / отступов. Таким образом, добавление следующего к index.js решает проблему.

import { injectGlobal } from 'styled-components';

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

Answer 2

Это стиль вашего браузера по умолчанию. Вы можете использовать что-то вроде Normalize.css или просто удалить поля и отступы тела самостоятельно.

body {
  margin: 0;
  padding: 0;
}

Вы можете сделать это с injectGlobal.

import { injectGlobal } from 'styled-components';

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