Material UI ButtonGroup样式属性不生效问题求助

核心问题在于单个Button和ButtonGroup对top样式的解析不一致（默认定位为static时，top属性不会生效），导致切换状态时布局偏移。以下是两种可靠的修复方案：

方案一：通过父容器负边距统一控制偏移（推荐） #

将偏移逻辑移至包裹按钮的Grid父元素，确保Button和ButtonGroup的偏移量完全一致：

<Grid container item xs={2} direction="column" alignItems="center" sx={{ paddingBottom: '10px' }}>
  <Grid item sx={{ height: '70%' }}>
    <Box
      component="img"
      src={`/assets/images/products/product_3.jpg`}
      sx={{
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        borderRadius: 1.5,
      }}
    />
  </Grid>
  {/* 给按钮容器添加负上边距，统一向上偏移 */}
  <Grid item sx={{ mt: '-10px' }}>
    {!productInCart ? (
      <Button
        variant="contained"
        onClick={handleAddToCart}
      >
        ADD TO CART
      </Button>
    ) : (
      <ButtonGroup variant="contained">
        <Button onClick={handleRemoveFromCart}>-</Button>
        <Button>{productInCart.quantity}</Button>
        <Button onClick={handleAddToCart}>+</Button>
      </ButtonGroup>
    )}
  </Grid>
</Grid>

说明： #

• mt: '-10px'让整个按钮容器向上偏移10px，覆盖图片底部
• 外层Grid添加paddingBottom: '10px'，避免按钮被容器底部截断
• 移除了按钮组件上的top样式，统一由父容器控制布局

方案二：显式设置定位属性 #

如果坚持使用top属性，需给Button和ButtonGroup都添加position: relative，确保top属性生效：

<Grid container item xs={2} direction="column" alignItems="center">
  <Grid item sx={{ height: '70%' }}>
    <Box
      component="img"
      src={`/assets/images/products/product_3.jpg`}
      sx={{
        width: '100%',
        height: '100%',
        objectFit: 'cover',
        borderRadius: 1.5,
      }}
    />
  </Grid>
  <Grid item>
    {!productInCart ? (
      <Button
        variant="contained"
        sx={{ position: 'relative', top: '-10px' }}
        onClick={handleAddToCart}
      >
        ADD TO CART
      </Button>
    ) : (
      <ButtonGroup
        variant="contained"
        sx={{ position: 'relative', top: '-10px' }}
      >
        <Button onClick={handleRemoveFromCart}>-</Button>
        <Button>{productInCart.quantity}</Button>
        <Button onClick={handleAddToCart}>+</Button>
      </ButtonGroup>
    )}
  </Grid>
</Grid>

说明： #

• 只有元素定位为relative/absolute/fixed时，top属性才会生效
• 此方案需重复设置样式，不如方案一简洁

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