ReactJS / Material-UI / Javascript: Can't get rounded borders on TableRow

Question

I'm trying to get rounded borders on TableRow. I've added style "borderRadius: 5" but it doesn't do anything. When I surround TableRow by Box with borderRadius, it does work but then the table spacing is broken.

I've been messing around with this for a while but can't figure out.. What's the best solution for this?

<Table>
<TableRow style={{ borderRadius: 5, backgroundColor: "green" }}>
    <TableCell>
        First table cell
    </TableCell>
    <TableCell>
        Second table cell
    </TableCell>
    <TableCell>
        Third table cell
    </TableCell>
</TableRow>
</Table>

Answer 1

Try add the css in the cell level like below,

.MuiTableRow-root td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.MuiTableRow-root td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Working code - https://codesandbox.io/s/recursing-wing-t8xke?file=/src/App.js