Question

如何减小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

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

Answer 1

您可以使用：

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

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

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

如何降低Material-UI TableFooter的高度

1 个答案: