React中如何让父容器铺满页面整个宽度？

从你的代码和描述来看，容器无法左右铺满的核心原因通常是父元素存在默认边距/内边距，或者容器本身未明确设置宽度占满视口。以下是具体修复步骤：

1. 清除根容器默认样式 #

React项目的根元素（通常是#root）可能被浏览器或脚手架默认添加了margin/padding，先清除这些样式：

#root {
  margin: 0;
  padding: 0;
  width: 100%;
}

2. 强制Home容器占满宽度 #

给home-container添加宽度和边距清除规则，确保它完全覆盖视口宽度：

.home-container {
  background-color: #111;
  width: 100%;
  min-width: 100vw; /* 确保小屏幕下也能铺满 */
  margin: 0;
  padding: 0;
}

3. 检查父组件的额外样式 #

如果Home组件嵌套在其他容器（比如App组件的外层div）里，要确保父容器没有设置padding或margin。比如App组件若有外层容器：

function App() {
  return (
    <div className="app-container">
      <Nav />
      <Home />
    </div>
  );
}

需给.app-container添加清除样式：

.app-container {
  margin: 0;
  padding: 0;
  width: 100%;
}

验证效果 #

修改后刷新页面，home-container的黑色背景应该能完全铺满页面左右两侧。若仍有空白，打开浏览器开发者工具（F12），检查home-container的父元素，查看是否有未清除的padding/margin属性，针对性调整即可。

内容的提问来源于stack exchange，提问作者HJTCH76