React Material-UI unable to adjust table size

0
votes

SandBox: https://codesandbox.io/embed/material-demo-j6pz9?fontsize=14&hidenavigation=1&theme=dark

I am trying to put some contents in a card and give an inline-grid display so that they can be next to each other. As far as I know, the Card component in Material-UI is responsive, so the size gets adjusted based on the content size.

I am trying to make my table smaller so that my card can also shrink. In my example, however, I set the table's width and height to 30%. It shrinks, but it creates a huge margin, leaving the size of the card that contains the table unchanged.

enter image description here

The entire code is in the sandbox, but I think the problem is in this part

const useStyles = makeStyles({
  card: {
    display: "inline-grid",
    borderRadius: "1em",
    boxShadow: "1.4 1.4 #182026",
    "&:hover": {
      boxShadow: "1 1 #182026"
    },
    margin: "1em 0",
    marginRight: "1em"
  },
  table: {
    width: "30%",
    height: "30%"
  }
});

It would be great if anyone can help. Thanks.

1
cssreactjsmaterial-ui

1 Answers

1
votes

You forgot to 1) wrap one of the tables in Card element and 2) assign the card class to the other.

case "interface":
      return <Card className={classes.card}>{renderTable(scaleObj[type][obj], obj)}</Card>;
case "ccc":
      return <Card className={classes.card}>{renderBFD(scaleObj[type][obj])}</Card>;