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

Question

I am trying to add some spacing between each row in my table in MUI. However when adding borderSpacing: '0px 10px:important' and borderCollapse, 'separate.important'? nothing happens. How can I add spacing between each row? This normally works fine in HTML and CSS so therefor I am unsure how to solve in mui. Thanks [![This is my goal][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

It doesn't seem to be a feature in this component. You can achieve it by overriding some css as follow:

.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;
}

Note that you have to create the border yourelf now by adding it to the td and th . Also, think about encapsulating if you don't want this modification to be global.