Javascript material UI按钮组样式props 不反射

我有一个产品图像和相关的按钮显示在网格容器内.这些按钮是基于一些状态变量的conditionally rendered.基本上，如果产品数量为0，则显示Button (ADD TO CART)或Button Group (with '-' , 'quantity' , '+' buttons).

我希望按钮有一个稍微在底部图像边界内的位置.这是使用Styleprops 成功地为单个Add to Cart按钮实现的，但是传递给Button组的相同样式props 并不反映预期的行为.因此该按钮在交互时围绕图像底部来回浮动.如有任何修改，敬请惠顾！

代码如下:

<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"
            style={{
              top: '-10px',
            }}
            onClick={handleAddToCart}
          >
            ADD TO CART
          </Button>
        ) : (
          <ButtonGroup
            variant="contained"
            style={{
              top: '-10px',
            }}
          >
            <Button onClick={handleRemoveFromCart}>-</Button>
            <Button>{productInCart.quantity}</Button>
            <Button onClick={handleAddToCart}>+</Button>
          </ButtonGroup>
        )}
      </Grid>
    </Grid>