React MUI登录页面背景图无法全屏，如何消除顶部空白？

顶部空白的核心原因是浏览器默认给body元素设置了8px左右的margin，而MUI的Container组件不会自动清除全局默认样式，导致最外层背景容器被顶出空白。以下是几种可行的解决方案：

方案1：使用MUI官方的CssBaseline重置全局样式 #

这是最规范的方式，MUI的CssBaseline组件会自动清除浏览器默认的margin、padding，统一box-sizing规则，避免这类布局冲突。

import { CssBaseline, Container } from '@mui/material';

export default function LoginPage() {
  return (
    <>
      {/* 放在页面最外层，重置全局样式 */}
      <CssBaseline />
      <div
        style={{
          backgroundImage: `url(${coralBackground})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          width: '100vw',
          minHeight: '100vh',
          margin: 0,
          padding: 0,
        }}
      >
        <Container>
          {/* 登录表单等页面内容 */}
        </Container>
      </div>
    </>
  );
}

方案2：手动清除body的默认margin #

如果不想引入CssBaseline，可以直接在全局样式中清除body的默认margin：

/* 在全局CSS文件中添加 */
body {
  margin: 0;
  padding: 0;
}

或者在组件内用内联样式配合GlobalStyles组件（MUI提供）：

import { GlobalStyles, Container } from '@mui/material';

export default function LoginPage() {
  return (
    <>
      <GlobalStyles styles={{ body: { margin: 0, padding: 0 } }} />
      <div
        style={{
          backgroundImage: `url(${coralBackground})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          width: '100vw',
          minHeight: '100vh',
        }}
      >
        <Container>
          {/* 页面内容 */}
        </Container>
      </div>
    </>
  );
}

方案3：强制背景容器定位到顶部 #

通过绝对定位让背景容器完全贴合视口顶部，不受body默认margin影响：

<div
  style={{
    backgroundImage: `url(${coralBackground})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100vw',
    minHeight: '100vh',
    position: 'absolute',
    top: 0,
    left: 0,
    margin: 0,
    padding: 0,
  }}
>
  <Container>
    {/* 页面内容 */}
  </Container>
</div>

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