Material UI ButtonGroup 样式道具不反映

Question

我有一个产品图像和关联的按钮显示在网格容器内。按钮根据某些状态变量“有条件地呈现”。基本上，如果产品数量为 0，它会显示一个 按钮（添加到购物车），否则显示 按钮组（带有“-”、“数量”、“+”按钮）。 我希望按钮的位置稍微位于底部图像边界之内。使用 style 属性成功地为单个“添加到购物车”按钮实现了这一点，但是传递到 Button 组的相同样式属性并未反映预期的行为。因此，按钮在交互时会在图像底部来回浮动。任何修复表示赞赏！

代码如下：

<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>

Answer 1

marginBottom

添加到

image

并从按钮/按钮组中删除样式属性，这样您就不会具有双重样式，而且，如果按钮位置和按钮组位置之间不匹配在它们之间切换时，您会看到一些闪烁。 （就像您上传的图片）

<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,
        marginBottom: '10px'
      }}
    />
  </Grid>
  <Grid item>
    {!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>