React+TypeScript实现登录页多层图片布局求助

我想实现如下登录页布局：橙色背景图上方放置蓝色矩形图，蓝色图旁设置粉色登录组件。我使用React JS和TypeScript，编程与样式经验不足，附上现有代码寻求帮助：

现有代码 #

style.ts

import styled from '@emotion/styled';
import { Grid } from '@mui/material';

export const ContainerMain = styled(Grid).attrs({
  container: true,
})`
  height: 100vh;
`;

export const ContainerImagem = styled(Grid).attrs({
  item: true,
})`
  top: 0px;
  left: 0px;
  width: 2030px;
  height: 1142px;
  background-size: 'cover';
`;

export const ContainerLogin = styled(Grid).attrs({
  item: true,
})`
  top: 226px;
  left: 1242px;
  width: 520px;
  height: 528px;
  display: 'center';
  opacity: 1;
  border-radius: 4px;
  background-color: var(--white-100);
`;

login.tsx

import { Hidden } from '@mui/material';
import { motion } from 'framer-motion';
import backg1 from './path/to/橙色背景图.png';
import backgr2 from './path/to/蓝色矩形图.png';
import { ContainerMain, ContainerImagem, ContainerLogin } from './style';

const LoginLayout = ({ children }) => {
  return (
    <ContainerMain>
      <Hidden lgDown>
        <ContainerImagem xs={12}>
          <img src={backg1} />
          <img src={backgr2} />
        </ContainerImagem>
      </Hidden>

      <ContainerLogin sm={12} md={12} xs={12} lg={6} xl={6}>
        <motion.div
          animate={{ x: [100, 0] }}
          transition={{ type: 'spring', stiffness: 5 }}
        >
          {children}
        </motion.div>
      </ContainerLogin>
    </ContainerMain>
  );
};

export default LoginLayout;

问题分析与修改方案 #

1. 背景图层级与定位修正

直接用<img>标签会导致两张图并排，无法实现橙色背景+蓝色矩形叠放的效果，改为背景图+伪元素定位的方式：

修改style.ts中的ContainerImagem：

export const ContainerImagem = styled(Grid).attrs({
  item: true,
})`
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(${backg1});
  background-size: cover;
  background-position: center;

  &::after {
    content: '';
    position: absolute;
    top: 60px; // 调整蓝色矩形垂直位置
    left: 60px; // 调整蓝色矩形水平位置
    width: 65%; // 根据需求设置宽度
    height: 85%; // 根据需求设置高度
    background-image: url(${backgr2});
    background-size: contain;
    background-repeat: no-repeat;
  }
`;

同时修改login.tsx，移除ContainerImagem内的<img>标签：

<Hidden lgDown>
  <ContainerImagem lg={6} xl={6} />
</Hidden>

2. 登录组件样式与布局调整

• 移除硬编码的top/left，利用Grid布局让组件自动靠右
• 将背景色改为粉色（替换原白色）
• 修正display: 'center'的错误写法，改为弹性布局实现内部居中

修改style.ts中的ContainerLogin：

export const ContainerLogin = styled(Grid).attrs({
  item: true,
})`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  opacity: 1;
  border-radius: 4px;
  background-color: #ffccd5; // 粉色示例色，可自行调整
  padding: 24px;
`;

3. 响应式布局优化

调整Grid列分配，大屏下背景图与登录组件各占6列，小屏仅显示登录组件：

<ContainerMain>
  <Hidden lgDown>
    <ContainerImagem lg={6} xl={6} />
  </Hidden>
  <ContainerLogin sm={12} md={12} xs={12} lg={6} xl={6}>
    <motion.div
      animate={{ x: [100, 0] }}
      transition={{ type: 'spring', stiffness: 5 }}
    >
      {children}
    </motion.div>
  </ContainerLogin>
</ContainerMain>

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