ReactJS / Material-UI / Javascript：无法在 TableRow 上获得圆角边框

Question

我正在尝试在 TableRow 上获得圆角边框。我添加了样式“borderRadius：5”，但它没有做任何事情。当我用 borderRadius 将 TableRow 包围起来时，它确实有效，但表格间距被破坏了。

我已经搞乱了一段时间但无法弄清楚..对此最好的解决方案是什么？

<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

尝试在单元格级别添加 css，如下所示，

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

工作代码 - https://codesandbox.io/s/recursing-wing-t8xke?file=/src/App.js