Material UI ButtonGroup style props not reflecting

March 6, 2024

I have a Product image and associated buttons displayed inside a Grid container. The Buttons are conditionally rendered based on some state variables. Basically if the product quantity is 0, it displays a Button (ADD TO CART) else a Button Group (with ‘-‘ , ‘quantity’ , ‘+’ buttons).

I want the Buttons to have a positioning slightly inside the bottom image boundary. This is successfully implemented for the single Add to Cart button using the style props, however the same style props passed to the Button group doesn’t reflect the expected behaviour. And hence the button floats back and forth around the image bottom upon interaction. Any fixes appreciated !

Code below:

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

>Solution :

I suggest you add marginBottom to the image and remove the style attribute from both the button/button group, so you don’t have double styled, also, if there is a mismatch between the button position and button group position you will see some flickering when switching between them. (like the image you uploaded)

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