如何降低 Material-UI TableFooter 高度答案

【问题标题】：How to reduce Material-UI TableFooter height如何降低 Material-UI TableFooter 高度
【发布时间】：2019-04-27 15:29:31
【问题描述】：

如何降低 TableFooter 组件的高度？我正在尝试降低材料 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>

https://codesandbox.io/s/moj46v62oy?fontsize=14

当前输出的大小不小于该值。我希望减少箭头顶部和底部之间的空间。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你可以使用：

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

一旦 v4 发布并使用全局样式，这应该会变得更容易。

示例：https://codesandbox.io/s/pmokwxxmvj

【讨论】：