React中Div无法铺满页面边缘及Hydration报错求助

先处理Hydration失败问题 #

你在组件里添加<body>标签导致报错的原因很明确：SSR（服务端渲染）模式下，服务器已经生成了完整的<html>和<body>结构，客户端渲染时再嵌套一个<body>，会导致服务端与客户端的DOM结构不匹配，直接触发Hydration失败。绝对不要在React组件内部渲染<body>标签。

解决Div与屏幕顶部/侧边的空白问题 #

空白是浏览器默认给<html>或<body>元素添加了margin/padding（比如Chrome默认给<body>设置了8px的margin），只需通过全局样式重置即可解决：

方法1：全局CSS文件重置 #

在项目的全局样式文件（如globals.css、index.css，不同React框架路径可能不同，比如Next.js的styles/globals.css，Create React App的src/index.css）中添加以下代码：

/* 重置浏览器默认样式 */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 可选：确保根容器占满视口宽度 */
#root {
  width: 100%;
  margin: 0;
  padding: 0;
}

然后保持你的bodyDiv原有样式即可：

.bodyDiv {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  background-color: green;
}

方法2：内联样式或CSS-in-JS临时处理（不推荐全局场景） #

如果不想修改全局样式，可给bodyDiv添加绝对定位强制贴合屏幕：

<div 
  style={{
    width: '100%',
    height: '500px',
    margin: 0,
    padding: 0,
    backgroundColor: 'green',
    position: 'absolute',
    top: 0,
    left: 0
  }}
>
  {/* 内容 */}
</div>

但这种方法属于临时 hack，全局样式重置才是更规范的解决方案。

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