React中CSS背景样式失效问题求助

问题根源 #

• React组件中直接返回<body>标签是错误用法：React应用的根节点已经挂载在页面原生的<body>内，自定义的<body>会导致DOM结构混乱，样式无法正确作用到页面实际的body元素上。
• <body>元素默认高度仅由内容撑开，未设置为视口高度，导致背景渐变无法铺满整个页面。
• 按钮的垂直居中实现不完整：仅设置top:50%只会让按钮顶部对齐视口垂直中点，没有真正居中。

修复步骤 #

1. 修正App.js的DOM结构 #

移除自定义的<body>标签，改用普通div包裹内容：

import './App.css';

function App() {
  return (
    <div className='Home-page'>
      <button className='Start'>Start</button>
    </div>
  );
}

export default App;

2. 调整App.css样式 #

• 给<body>添加min-height: 100vh确保背景铺满整个视口，同时清除默认边距；
• 完善按钮的居中逻辑，实现水平+垂直双向居中：

body {
  margin: 0; /* 清除浏览器默认边距 */
  background: rgb(2, 0, 36);
  background: radial-gradient(
    circle,
    rgba(2, 0, 36, 1) 0%,
    rgba(9, 9, 121, 0.8688725490196079) 52%,
    rgba(0, 212, 255, 1) 100%
  );
  width: 100%;
  min-height: 100vh; /* 强制铺满视口高度 */
}
.Home-page {
  text-align: center;
}

.Start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 修正偏移，实现精准居中 */
}

效果说明 #

修改后，背景渐变会铺满整个浏览器视口，按钮会准确居中显示，DOM结构符合React应用规范，样式可以正常生效。

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