如何在材質 UI/React 中添加行間距？

Question

我正在嘗試在 MUI 表中的每一行之間添加一些間距。 但是，當添加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來創建自己的邊框。 另外，如果您不希望此修改是全局的，請考慮封裝。