MUI React中Skeleton-Avatar与IconButton背景呈椭圆形的修复咨询

核心问题是MUI Stack默认的flex布局会拉伸子元素，再加上Skeleton与Avatar嵌套的写法引发样式冲突，最终导致圆形骨架变形为椭圆。以下是两种直接有效的修复方案：

方案1：简化Skeleton的使用（推荐） #

无需用Skeleton包裹Avatar，直接使用Skeleton的circular变体并设置宽高即可——MUI的Skeleton本身就支持圆形样式，完全能替代“骨架+空Avatar”的组合：

{form.img ? (
  <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} />
) : (
  <Skeleton animation={false} variant="circular" sx={{ width: 56, height: 56 }} />
)}

方案2：调整Stack的对齐规则 #

如果必须保留Avatar嵌套的写法，解决思路是阻止Stack拉伸子元素：

方法A：全局修改Stack的垂直对齐 #

给Stack添加alignItems: 'center'，让所有子元素在垂直方向居中，避免被强制拉伸：

<Stack 
  direction="row" 
  borderRadius="0" 
  spacing={2} 
  key={index} 
  sx={{ marginLeft: '-50px', alignItems: 'center' }}
>

方法B：单独给Skeleton设置不拉伸 #

仅针对Skeleton元素设置alignSelf: 'center'，不会影响Stack内其他组件的布局：

<Skeleton animation={false} variant='circular' sx={{ alignSelf: 'center' }}>
  <Avatar sx={{ width: 56, height: 56}}  />
</Skeleton>

问题原因说明 #

MUI Stack的direction="row"布局默认alignItems: 'stretch'，会强制子元素高度撑满Stack的垂直交叉轴。即使给Avatar设置了相等的宽高，父元素Skeleton被拉伸后，内部的Avatar也会跟着变形。而直接使用Skeleton的圆形变体，能避免嵌套带来的样式冲突，同时更符合MUI的组件设计逻辑。

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