reactjs - 获取 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/ .