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/。

Answer 2

解决其中的padding = 0px问题。扔完上面所有的东西之后。

Answer 3

对我来说，在width: '10px'样式属性中设置TablePagination就足够了，但是我的结构略有不同：

<Paper>
    <Table>
        <TableHead>
            ...
        </TableHead>
        <TableBody>
            ...
        </TableBody>
    </Table>
    <TablePagination style={{width:'10px'}} .../>
</Paper>

Answer 4

只要写

<TablePagination style={{ display:"flex" }} .../>

Answer 5

如果您只想更改单个分页实例而不是整个应用程序的对齐方式（使用上面 Maksym 所述的主题覆盖）：

将 className 应用到您的 TablePagination：

<TablePagination
  count={5}
  onChangePage={handleChangePage}
  page={page}
  rowsPerPage={perPage}
  rowsPerPageOptions={[]}
  className={classes.pagination}
/>

并定义分页类，如：

const useStyles = makeStyles((theme) => ({
  pagination: {
    "& .MuiTablePagination-spacer": {
      display: "none",
    },
  },
}));

这假设您已经在 JSX.Element 中定义了类：

const classes = useStyles();

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

5 个答案: