React Material-UI无法调整表格大小

Posted 2021-05-06

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

如果有人可以帮助，那就太好了。谢谢。

答案

[您忘记了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>;