Reactjs 如何降低材质UI表脚高度

如何降低TableFooter组件的高度？我试图降低materials UI中TableFooter组件的高度，但低于56px时，页脚的高度不会变小。然而，增加/扩大规模没有问题

我根据我在这里读到的其他文章尝试使用MUI主题覆盖，但它们也不起作用

const theme = createMuiTheme({
  overrides:{
      MuiTableRow: {
          root: { //for the body
              height: "100%"
          },
          head: { //for the head
              height: "100%"
          },
          footer: {
            height: '30px',
            minHeight: '20px',
            backgroundColor: 'grey'
          },
      }
  }
})

“我的表格”的代码主要基于material UI网站上的自定义分页演示，而不是尝试减小页脚大小的代码

<Paper className={classes.root}>
  <div className={classes.tableWrapper}>
    <Table className={classes.table} padding={"none"}>
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat (g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
          <TableRow key={row.id}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
          </TableRow>
        ))}
        {emptyRows > 0 && (
          <TableRow style={{ height: 48 * emptyRows }}>
            <TableCell colSpan={4} />
          </TableRow>
        )}
      </TableBody>
      <TableFooter className={classes.footer}>
        <TableRow className={classes.footer}>
          <TablePagination
            rowsPerPageOptions={[]}
            colSpan={3}
            count={rows.length}
            rowsPerPage={rowsPerPage}
            page={page}
            SelectProps={{
              native: true,
            }}
            onChangePage={this.handleChangePage}
            ActionsComponent={TablePaginationActionsWrapped}
            style={{ padding: 0, margin: 0 }}
          />
        </TableRow>
      </TableFooter>
    </Table>
  </div>
</Paper>

甜点（100克）
卡路里
脂肪（g）
{rows.slice（page*rowsPerPage，page*rowsPerPage+rowsPerPage）.map（row=>(
{row.name}
{row.carries}
{row.fat}
))}
{emptyRows>0&&(
)}

电流输出，其大小不会小于该值。我希望缩小箭头顶部和底部之间的间距。

您可以使用：

footer: {
    "& > td > div": {
      height: 30,
      minHeight: 30
    },
    backgroundColor: "grey",
    height: 30
  }

一旦v4推出并且使用了全局样式，这应该会变得更容易

例如：