如何在内部渲染组件时带动画效果改变模态框尺寸？

核心问题分析 #

你之前的尝试存在两个关键问题：

1. 模态框卡片未设置自适应宽度，导致无法跟随内部内容动态扩展
2. 第二个组件的宽度控制逻辑冲突（同时设置width:0%和minWidth），过渡动画无法正常触发

分步实现方案 #

1. 调整模态框基础样式 #

先让模态框卡片能根据内部内容自动调整尺寸，同时保留居中定位和过渡效果：

sx={{
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  display: 'flex',
  flexDirection: { xs: 'column', md: 'row' }, // 移动端纵向排列，桌面端横向排列
  transition: 'all 500ms ease', // 统一过渡属性，简化写法
  minWidth: '30%',
  width: 'fit-content', // 关键：让卡片宽度适配内部内容
  maxWidth: '90vw', // 限制最大宽度，避免超出屏幕
}}

2. 重构内部组件样式 #

直接把两个组件放在模态框的flex容器中，分别控制过渡逻辑：

表单容器（第一个组件）

<div
  style={{
    flex: condition ? '1 1 60%' : '1 1 100%', // 有第二个组件时占60%宽度，否则占满
    minWidth: '30%',
    transition: 'flex 500ms ease-out',
    paddingRight: condition ? '10px' : 0, // 有右侧组件时添加间距
  }}
>
  {/* 你的表单内容 */}
</div>

动态渲染的第二个组件

{condition && (
  <div
    style={{
      flex: '0 0 200px', // 固定宽度200px，不压缩不扩展
      transition: 'all 500ms ease-in',
      opacity: condition ? 1 : 0, // 配合过渡的透明度变化，避免突兀
    }}
  >
    {/* 第二个组件内容 */}
  </div>
)}

3. 关键逻辑说明 #

• 响应式适配：通过MUI的断点属性flexDirection，自动切换移动端/桌面端的排列方向，无需额外写媒体查询
• 平滑过渡：利用flex属性的变化实现第一个组件的宽度平滑缩小，第二个组件通过opacity和显隐逻辑实现过渡
• 尺寸自适应：模态框用width: fit-content确保能跟随内部组件总宽度扩展，maxWidth防止桌面端宽度溢出

4. 替代方案（精细控制宽度扩展） #

如果需要让第二个组件从0宽度平滑扩展到200px，可以调整其样式：

<div
  style={{
    width: condition ? '200px' : '0',
    overflow: 'hidden', // 宽度为0时隐藏内容，避免溢出
    transition: 'width 500ms ease-in',
    paddingLeft: condition ? '10px' : 0,
  }}
>
  {/* 第二个组件内容 */}
</div>

同时将表单容器的flex设为1，这样当第二个组件宽度变化时，表单会自动填充剩余空间。

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