根div填充React(样式组件)

Question

我有一个简单的React应用程序,使用Redux Provider来包装我的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

这是浏览器的默认样式.您可以使用Normalize.css之类的东西,或者只是自己删除身体的边距和填充.

body {
  margin: 0;
  padding: 0;
}

你可以这样做injectGlobal.

import { injectGlobal } from 'styled-components';

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