如何在材料中的两个表行之间留出空间-UI表格行

Question

const useRowStyles = makeStyles({
  root: ({ open }) => ({
    backgroundColor: open ? "#F5F6FF" : "white",
    backgroundOrigin: "border-box",
    spacing: 8,
    "& > *": {
      height: "64px",
      borderSpacing: "10px 10px ",
      borderCollapse: "separate",
    },
  }),
});
<TableRow className={classes.root}>
     cell content will comes here
<TableRow>

这是我在TableRow资料-UI中使用的CSS，但它不起作用。

有人能告诉我如何在资料-UI TableRows中增加行间的空间吗？

我发现了许多类似的问题，但他们并没有解决我的问题。

在这里，我重新创建了这个问题https://codesandbox.io/s/winter-leftpad-7jnhv?file=/src/App.js

Answer 1

您需要将TableRow放在Table组件中，并在TableRow容器中添加以下样式，它将在除最后一行之外的每一行设置边框底部：

const useRowStyles = makeStyles({
  tableBody: {
    "& > :not(:last-child)": {
      borderBottom: "25px solid red"
    }
  }
});

<TableBody className={classes.tableBody}>
  <TableRow>
    {...}
  </TableRow>
  <TableRow>
    {...}
  </TableRow>
</TableBody>

现场演示

​

​