React中如何让LinearProgress位于TextField底部且不顶起输入组件

核心思路是让进度条脱离正常文档流，或者提前预留进度条的占位高度，避免加载状态切换时产生布局偏移挤动上方输入组件，两种常用实现方案如下：

方案1：绝对定位实现（推荐） #

利用定位让进度条不占文档流高度，同时给父容器预留对应底部空间避免遮挡内容：

<Grid 
  component="div" 
  item xl={2} lg={2} md={2} sm={12} xs={12}
  sx={{ position: 'relative', pb: '4px' }} // 父容器设相对定位，底部预留4px（LinearProgress默认高度）的padding
>
  <CategorySelect />
  <Box
    sx={{
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
    }}
  >
    <LinearProgress />
  </Box>
</Grid>

这种方案的优势是加载状态消失后也不会留下多余空白区域，全程不会触发上方组件的位置偏移。

方案2：固定占位容器实现 #

提前给进度条的外层容器设置固定高度，不管进度条是否展示，容器都占对应高度，也不会产生布局偏移：

<Grid component="div" item xl={2} lg={2} md={2} sm={12} xs={12}>
  <CategorySelect />
  <Box
    sx={{
      marginTop: "0.5rem",
      height: '4px', // 固定和LinearProgress等高的高度
    }}
  >
    {/* 加载状态为true时才渲染LinearProgress，容器高度提前预留不会挤动上方组件 */}
    {isLoading && <LinearProgress />}
  </Box>
</Grid>

这种方案写法更简单，适合接受进度条位置始终预留空白的场景。

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