在Material-UI与React中避免使用CSS的position: absolute

核心思路 #

原代码里用position: absolute+left:0;right:0，目的是让按钮容器撑满父级宽度并居中按钮。要去掉这个绝对定位属性，关键是找到能实现容器撑满宽度+按钮居中的替代方案，同时完全保留原视觉布局。

直接修改方案 #

直接调整按钮所在Stack的样式属性，替换掉绝对定位的作用：

<Stack
  alignItems="center"
  sx={{
    marginTop: 2,
    width: '100%', // 替代left:0、right:0，让容器自动撑满父级宽度
    // 移除position: "absolute"、left、right属性
    // display: "flex"可省略，Stack组件默认已启用flex布局
  }}
>
  <Button variant="outlined" sx={{ bgcolor: "white" }}>
    Hello There
  </Button>
</Stack>

修改后按钮容器会自然处于产品列表下方的文档流中，width:100%让它撑满父级宽度，配合alignItems:center实现按钮居中，和原绝对定位的视觉效果完全一致。

更优语义化实现 #

如果想让布局更符合MUI组件的设计逻辑，可将MainContainer改为flex容器，统一管理内部元素排布：

<MainContainer sx={{
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center', // 统一让内部子元素居中
}}>
  <Stack spacing={1} sx={{ width: '100%' }}> {/* 让产品列表撑满父级宽度 */}
    {products?.map((product) => (
      <ProductItem
        key={product.id}
        name={product.name}
        description={product.description}
      />
    ))}
  </Stack>
  <Stack sx={{ marginTop: 2 }}> {/* 无需额外设置宽度和居中，继承父级样式 */}
    <Button variant="outlined" sx={{ bgcolor: "white" }}>
      Hello There
    </Button>
  </Stack>
</MainContainer>

这种方式完全摒弃了绝对定位，利用flex布局的语义化特性实现需求，布局稳定性更强，后续调整样式或结构也更灵活。

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