ReactJs: Material-UI 表格 - 更改填充(padding)

Question

对于这个全栈应用，我发现原始开发者似乎实现了某些组件来创建应用网页的表格。

问题在于所有单元格的填充都相当大。在Chrome浏览器中打开渲染后的页面并使用Chrome开发者工具，我可以看到。

.MuiTableCell-sizeSmall{
    padding: 6px 24px 6px 16px;
}

看起来 MuiTableCell 没有直接在代码中实现（因此我只能在渲染的 DOM 中看到它，而不是在代码中）。似乎它主要实现了 material-ui 和 material-table。

我有一点前端经验，但不知道下一步该怎么做来修改填充。

具体来说，通过使用 Chrome 开发者工具进行操作，我想将右侧填充（设置为24px）减少到0px，以便在渲染的 DOM 中使用这个值。

.MuiTableCell-sizeSmall{
    padding: 6px 0px 6px 16px;
}

有什么建议吗？

我认为与@Material-UI相关的一些导入可能是相关的，它们包括:ToolBar, Appbar, FormControl, InputField, TextField, ViewColumn和TablePagination。

从material-table中导入的是'MaterialTable'和'MTableToolbar'。

在Intellij中，我进行了盲目搜索，并发现SizeSmall属性似乎来自于TableCell（属于material-ui）。

- CaptainObv

Answer 1

这里的 CSS 是为 size 属性 中的 small 值而设计的。

覆盖它的一种方式是使用 makeStyles 并覆盖 .MuiTableCell-sizeSmall。

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTable: {
    "& .MuiTableCell-sizeSmall": {
      padding: "6px 0px 6px 16px" // <-- arbitrary value
    }
  },
});

function YourComponent() {
  const classes = useStyles();

  return (
    ...
      <Table classes={{root: classes.customTable}} size="small">
        ...

- 95faf8e76605e973

Answer 2

最佳答案已不再推荐使用，请参考：https://mui.com/system/styled/

下面是在 MUI 中修改表格单元格的示例，此处以删除默认填充为例。

const StyledTableCell = styled(TableCell)({
  padding: 0,
})

您可以在表格中使用自定义或原始的单元格组件。

<TableContainer>
  <Table>
    <TableBody>
        <TableRow>

          <TableCell>Normal cell.</TableCell>

          <StyledTableCell>Custom style here.</StyledTableCell>

          <TableCell align="right">Great.</TableCell>

        </TableRow>
    </TableBody>
  </Table>
</TableContainer>

- ViktorMS

Answer 3

你可以通过在Table组件中使用sx属性来实现这种自定义。你可以参考Material-UI文档了解更多关于覆盖嵌套组件样式的信息。 以下是修改后的代码：

<TableContainer>
  <Table
    sx={{
      '& .MuiTableCell-sizeMedium': {
        padding: '10px 16px',
      },
    }}
  >
    {/* ... */}
  </Table>
</TableContainer>

通过遵循这种方法，您将能够调整在您的Table组件中具有MuiTableCell-sizeMedium类的单元格的填充。

- Mahdi Cheraghi