无法删除反应网络应用程序的边距答案

【问题标题】：Can't remove margins on react web app无法删除反应网络应用程序的边距
【发布时间】：2018-12-03 00:30:33
【问题描述】：

我无法在我的 react 项目中移除这些巨大的白边。以下是我尝试过的一些解决方案。

* { margin: 0; padding: 0; }

/-/-/-/

body {
  max-width: 2040px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both;
}

我已经尝试了每一种变化。我唯一安装的应该影响任何 CSS 方面的依赖项是引导程序，我不认为就是这样。我尝试将max-width 调整为2040px 的值只是为了测试它是否可以工作，并且似乎有一个我可以设置宽度的限制。帮助将不胜感激。

我还应该提到，这在整个页面中都是持久的。此问题不仅限于我在css 文件中链接的背景图像 White Margins

【问题讨论】：

“我安装的唯一会影响任何 CSS 方面的依赖项是引导程序，我不认为就是这样。” - Bootstrap 是一个 CSS 网格框架，可以控制页面布局的许多方面。如果你不了解它的网格系统，你应该更多地阅读它。尝试删除调用 Bootstrap 的行，看看你的排水沟是否消失。
感谢@JonUleis 的回复。我查看了文档，发现一个解决方案是将container-fluid 作为一个类添加到父 div。这不起作用。
你在使用 bootstrap 4 吗？

标签： css reactjs react-redux

【解决方案1】：

当您使用背景图片时。它的问题是由于图像尺寸比。

你必须在 css 中使用 background-size:cover 属性。

同时使用适当的背景位置来确保木槌位于页面的中心底部。

【讨论】：

【解决方案2】：

* { margin: 0; padding: 0; } 被浏览器覆盖。

试试

html,body{
   margin:0;
   padding:0;
}

【讨论】：

【解决方案3】：

用户代理样式表覆盖自定义样式。您可以在普通 html 和 css 中使用 !important 覆盖它

最好是用户反应间距库，而不是覆盖用户默认样式表https://material-ui.com/system/spacing/

或者你可以使用下面的

<body id="body">
<div id="appRoot"></div>
</body>

样式表

body
  margin: 0
  padding: 0
button
  padding: 10px 20px 
  border-radius: 5px
  outline: none

React JS 代码块

class A extends React.Component{  
  componentWillMount(){
    document.getElementById('body').className='darktheme'
  }
    componentWillUnmount(){
    document.getElementById('body').className=''
  }
  render(){
    return (
      <div> Component A </div>
    )
  }
}
class App extends React.Component{  
  constructor(){
    super()
    this.state = {
      isAMount: false
    }
  }

  handleClick(){
    this.setState({
      isAMount: !this.state.isAMount
    })
  }

  render(){
    return (
    <div> 
        <button onClick={this.handleClick.bind(this)}> Click Me</button> 
        <div> App </div>
        <hr />
        <div> {this.state.isAMount && <A /> } </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('appRoot'))

【讨论】：

【解决方案4】：

所有浏览器使用不同的默认边距，这导致网站在其他浏览器中看起来不同。

* 是wildcard，表示我们网站中的all elements（考虑为universal selector），因此我们将网站中的每个元素设置为零边距和零填充，使网站在每个浏览器中看起来都一样。

如果您的样式没有被应用，那么您可以使用!important 覆盖样式，

* {    
    margin: 0 !important;
    padding: 0 !important;
}

【讨论】：

【解决方案5】：

我试图在我的 react 应用中添加背景图片，但 react 在顶部和左侧留下了一些边距。

const useStyles = makeStyles((theme) => ({
      background: {
        backgroundImage:  `url(${Image})`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        width: '100vw',
        height: '95vh',
      }

阅读文档后，我意识到不是margin，而是图像的定位。将position:fixed 设置为top:0 和left:0 解决了这个问题。

【讨论】：

【解决方案6】：

如果您使用 create-react-app 创建它，则可能会有一个文件 public/index.html。

有一个标签包裹在根周围，React 将在其中注入您的应用程序。

通常浏览器样式表将<body> 的边距设置为8px。这很可能是您正在努力摆脱的应用周围的白边。

要删除它，一种选择是打开 public/index.html 并使用这样的内联样式将边距设置为 0：

<body style=margin:0>

如果您使用@emotion/react 进行样式设置，您也可以选择（仍然假设public/index.html 中有这个body 标签）将其保留为<body> 并使用<Global> component 定义<body> 的样式.在你的App.js 中有这样的东西：

function App() {
  return (
    <div>
      <Global
        styles={css`
          body {
            margin: 0;
          }
        `}
      />
      <Your />
      <Other />
      <Components />
    </div>
  );
}

export default App;

【讨论】：

【解决方案7】：

在阅读了上面的答案并尝试之后，我得出的结论是，最好的方法是保留你的 index.css（注意：特别是 index.css 的边距已经全局设置为 0。）和 App.css 文件当您“npx create-react-app”时自动生成的。

我注意到许多初学者教程告诉您删除这些文件等等，但是在遇到这个问题之后，实际上只编辑样板文件比从头开始更容易。

【讨论】：