如何在 material UI/React 中添加行间距？

Question

我正在尝试在 MUI 的 table 中的每一行之间添加一些间距。但是，当添加 borderSpacing: '0px 10px!important' 和 borderCollapse: 'separate!important' 时，没有任何反应。如何在每行之间添加间距？这通常在 HTML 和 CSS 中工作正常，因此我不确定如何在 mui 中解决。谢谢 [![这是我的目标][1]][1]

import React from 'react'
import { Container, Table, TableCell, TableHead, TableRow, Paper,TableBody, Avatar, Typography,Box,TableContainer } from '@mui/material'
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(() => ({
    table: {
        minWidth: 650,
        borderCollapse: 'separate!important',
        borderSpacing: '0px 10px!important'
    }
}))
const MyTable = () => {
    const classes = useStyles();
    return (
        <React.Fragment>
            <Container maxWidth={"lg"} sx={{mt:"0.5%"}}>
                <TableContainer className={classes.tableContainer} component={Paper}>
                    <Table className={classes.table}>
                        <TableHead>
                            <TableRow>
                                <TableCell>SOMETHING</TableCell>
                                <TableCell>ELSE</TableCell>
                                <TableCell>TO</TableCell>
                                <TableCell>SORT</TableCell>
                                <TableCell></TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </React.Fragment>
    )
}

export default MyTable
'''


  [1]: https://i.stack.imgur.com/FbDjm.png

Answer 1

它似乎不是此组件的功能。您可以通过覆盖一些 css 来实现它，如下所示：

.MuiTableContainer-root {
  box-shadow: none;
}

.MuiTable-root{
  border-collapse: separate;
  border-spacing: 0 10px;
  border: transparent;
}

.MuiTable-root th, .MuiTable-root td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

请注意，您现在必须自己创建边框，将其添加到 td 和 th。另外，如果你不希望这个修改是全局的，可以考虑封装。

如何在 material UI/React 中添加行间距？

How to add spacing between rows in material UI/React?

javascript

html-table

reactjs

material-ui