javascript - TableRow Material-UI 之间的间距

Question

我想在 TableRow MaterialUI 组件之间添加空间。我怎样才能做到这一点？

<S.MainTable>
  <TableBody>
   {rows.map(row => {
     return (
       <S.StyledTableRow key={row.id}>
         <TableCell component="th" scope="row">{row.name}</TableCell>
         <TableCell numeric>{row.calories}</TableCell>
         <TableCell numeric>{row.fat}</TableCell>
         <TableCell numeric>{row.carbs}</TableCell>
         <TableCell numeric>{row.protein}</TableCell>
       </S.StyledTableRow>
           );
         })}
  </TableBody>
</S.MainTable>

Answer 1

将这几行代码添加到表格的 CSS 中:

{
     border-spacing: 0 5px !important;
     border-collapse: separate !important;
}