在 Material UI 上获取表格分页按钮和每页左侧的行

Question

有一个网站，我正在尝试缩小表格以适应移动屏幕，并在必要时进行扩展。我可以让它缩小并删除水平滚动条，但是，页脚给我带来了问题。页脚内容似乎与其他内容不相符。看起来它是他们代码的一部分，使其正确对齐。有办法改变这个吗？

代码：

    <TableFooter classes={classes.footer}>
    <div className={classes.footer}></div>
        <TablePagination
          className={classes.footer}
          colSpan={1}
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
          ActionsComponent={TablePaginationActionsWrapped}
        />
    </TableFooter>

 footer:{
  justifyContent: 'left',
  width: "10px",
  textAlign: 'left'
 }

Answer 1

使用 100% 宽度的 div 间隔符将按钮推到左侧。您可以覆盖此间隔符以使其没有宽度。这是快速而肮脏的：

.MuiTablePagination-spacer {
      flex: none !important;
}

更好的方法是在主题中定义特定于表（或应用程序范围）的覆盖：

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from '@material-ui/core/styles';
...
const tableTheme = createMuiTheme({
  overrides: {
    MuiTablePagination: {
      spacer: {
        flex: 'none'
      }
    }
  }
});
...
<ThemeProvider theme={tableTheme}>
  <Table>
    ...
  </Table>    
</ThemeProvider>

有关支持的样式的更多信息，请访问此处https://next.material-ui.com/es/api/table-pagination/。