Material-ui Card component's shadows and bottom get clipped when within GridList

user_1044542 0
Viewed 580

I'm trying to create a grid made of material-ui Cards using the Grid List component. However, in my attempt of putting the card within it, the bottom and shadow gets clipped. I think this is a very simple css issue but I cannot see what's wrong. Here is the sandbox:

https://codesandbox.io/embed/intelligent-wave-3gbzz?fontsize=14&hidenavigation=1&theme=light

In this image you can see how the bottom of each card is clipped when stacked with other cards on different rows. However, If you modify the window size, the cards without another card directly below it will render the bottom properly. This nehaviour can be checked in the sandbox link.

enter image description here

material-ui reactjs
1 Answers

If you examine your cards in the developer tools, you will see that it does not have any breathing room and that it uses box-shadow properties.

enter image description here


The box-shadow is configured to have 2px as its offset-y, so you will need some bottom margin

const useStyles = makeStyles((theme) => ({
  card: {
    maxWidth: 160,
    height: "100%",
    marginBottom: "2px" // or margin: "2px" so at least all sides are covered
  }
}));

Edit Cards within gridList material-ui (forked)

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

user_86808050
Related