React登录页CSS背景图片不显示及布局、移动端留白问题求助

需求与问题 #

• 目标实现：登录页左侧、右侧各展示一张图片，中间放置Login Card组件
• 现存问题：
  1. 实际仅能显示卡片+单侧图片，两侧图片无法同时展示
  2. 移动端视图存在留白，已尝试设置宽高100%无效
  3. 尝试过relative/absolute定位调整、Grid/Flex布局重构、z-index修改，均未解决

原代码 #

return (
  <>
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
      sx={{ minHeight: "100vh" }}
    >
      <Grid item xs={3}>
        <Stack alignItems="left">
          <div
            style={{
              height: "100%",
              width: "100vw",
              backgroundImage: `url("${LEFT_imageT}")`,
              backgroundSize: "20%",
              backgroundPosition: "left",
              backgroundRepeat: "no-repeat",
              backgroundColor: "#022445",
              position: "absolute",
              zIndex: -1,
              left: 0,
              bottom: 0,
            }}
          ></div>
        </Stack>
        <div>
          <Stack alignItems="center">
            <Card
              style={{
                width: "40vw",
                height: "100%",
                marginTop: "150px",
                backgroundColor: "#00264a",
                boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
              }}
            >
              <CardComponent></CardComponent>
            </Card>
          </Stack>
        </div>
        <div
          style={{
            height: "100%",
            width: "100vw",
            backgroundImage: `url("${Right_imageT}")`,
            backgroundSize: "20%",
            backgroundPosition: "right",
            backgroundRepeat: "no-repeat",
            backgroundColor: "#022445",
            position: "absolute",
            zIndex: -1,
            right: 10,
            top: 0,
          }}
        ></div>
      </Grid>
    </Grid>
  </>
)

问题分析 #

1. Grid容器设置direction="column"，导致垂直布局，无法实现水平左右结构
2. 两个绝对定位的div均为100vw宽度，且背景色一致，会互相覆盖
3. 卡片嵌套在xs={3}的Grid项中，宽度用40vw，布局逻辑冲突
4. 移动端留白未处理全局样式重置（如body默认margin），且响应式布局未适配

修复方案 #

1. 全局样式重置（解决移动端留白）

引入MUI的CssBaseline组件，重置html/body默认margin、padding，并确保根容器高度100%：

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

// 在组件最外层包裹
return (
  <>
    <CssBaseline />
    {/* 其余布局代码 */}
  </>
)

2. 重构水平布局（实现左右图片+中间卡片）

使用Grid的水平行布局，拆分三列：左右列展示图片，中间列放登录卡片，同时做响应式适配：

import { Grid, Card, Stack } from '@mui/material';

const LoginPage = () => {
  return (
    <>
      <CssBaseline />
      <Grid
        container
        spacing={0}
        sx={{ 
          minHeight: "100vh",
          backgroundColor: "#022445", // 全局背景色，避免留白
        }}
      >
        {/* 左侧图片列 */}
        <Grid 
          item 
          xs={false} sm={2} md={3} // 移动端隐藏，平板及以上显示
          sx={{
            backgroundImage: `url("${LEFT_imageT}")`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />

        {/* 中间登录卡片列 */}
        <Grid 
          item 
          xs={12} sm={8} md={6} // 移动端占满宽度，平板及以上居中
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "20px",
          }}
        >
          <Card
            sx={{
              width: { xs: "100%", sm: "70%", md: "500px" }, // 响应式宽度
              backgroundColor: "#00264a",
              boxShadow: "0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19)",
              padding: "30px",
            }}
          >
            <CardComponent />
          </Card>
        </Grid>

        {/* 右侧图片列 */}
        <Grid 
          item 
          xs={false} sm={2} md={3} // 移动端隐藏，平板及以上显示
          sx={{
            backgroundImage: `url("${Right_imageT}")`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />
      </Grid>
    </>
  );
};

export default LoginPage;

3. 关键调整说明

• 移除绝对定位的背景div，改用Grid列直接承载背景图，避免覆盖
• Grid列使用xs={false}在移动端隐藏左右图片，保证卡片占满屏幕，解决留白
• 卡片宽度设置响应式值，适配不同屏幕尺寸
• 全局设置Grid容器的背景色，确保无留白区域

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