React MUI背景图像不是全屏答案

【问题标题】：React MUI background image not full screenReact MUI背景图像不是全屏
【发布时间】：2022-10-23 12:25:01
【问题描述】：

我有一个带有 MUI 容器组件的登录页面。

我想为整个页面设置背景图像。我正在使用反应路由器。

我正在向外部 div 添加样式，如下所示：

<div
      style={{
        backgroundImage: `url(${coralBackground})`,
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        width: '100vw',
        minHeight: '100vh',
      }}
    >

但是，页面如下所示：

当我删除 MUI 容器时，它会占用整个空间。

如何摆脱顶部的白色部分并使图像占据全部空间？

【问题讨论】：

标签： reactjs material-ui vite

【解决方案1】：

这很可能是因为以下其中一项应用了一些样式，超出了 React 的范围：

React DOM 渲染到的容器。
<body> 标签。
或<html> 标签。

确保创建一些 CSS 以使所有这些都具有 margin: 0; padding; 0

另一种可能性是在您的基础index.html 中，您可能有一些元素占用了空间并且需要删除。

【讨论】：