React Material-UI не может настроить размер таблицы

Question

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

Я пытаюсь поместить некоторое содержимое в карту и дать отображение inline-grid, чтобы они могли быть рядом друг с другом. Насколько я знаю, компонент Card в Material-UI отзывчив, поэтому размер корректируется в зависимости от размера контента.

Я пытаюсь уменьшить размер таблицы, чтобы моя карточка также могла уменьшаться. , В моем примере, однако, я установил ширину и высоту таблицы на 30%. Он сжимается, но создает огромное поле, оставляя неизменным размер карты с таблицей.

Весь код находится в песочнице , но я думаю, что проблема в этой части

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%"
  }
});

Было бы здорово, если кто-нибудь может помочь. Спасибо.

Answer 1

Вы забыли 1) обернуть одну из таблиц в элемент Card и 2) присвоить класс card другому.

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