根 div 填充 React（样式化组件）答案

【问题标题】：Root div padding React (Styled Components)根 div 填充 React（样式化组件）
【发布时间】：2018-07-04 11:55:33
【问题描述】：

我有一个简单的 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内容移到屏幕边缘的正确方法是什么？

【问题讨论】：

我认为您正在使用浏览器的默认样式。尝试将 body {margin:0;padding:0;} 添加到您的 CSS。

标签： css reactjs styled-components

【解决方案1】：

这是您浏览器的默认样式。你可以使用Normalize.css 之类的东西，或者简单地自己删除正文的边距和填充。

body {
  margin: 0;
  padding: 0;
}

您可以使用 injectGlobal 来做到这一点。

import { injectGlobal } from 'styled-components';

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

【讨论】：

【解决方案2】：

感谢您的回答，但我一直在寻找 Styled Components 特定的答案。

原来Styled Components有一个辅助方法injectGlobal，它可以覆盖全局body标签。

使用它，可以设置所需的属性——在这种情况下，没有边距/填充。因此，将以下内容添加到 index.js 即可解决问题。

import { injectGlobal } from 'styled-components';

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

【讨论】：

【解决方案3】：

对于styled components v4 及更高版本，请改用createGlobalStyle：

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

【讨论】：

【解决方案4】：

在你的“App.css”中写下这个：

body {
  overflow-y: hidden;
}

这适用于我的主页。

【讨论】：