React Material UI TablePagination 如何居中页脚内容？

你之前尝试添加的align="center"、justify="center"、text-align="center"都不是TablePagination组件支持的合法属性，这类非定义的prop会被组件直接过滤忽略，完全不会产生样式效果。
TablePagination根容器默认采用Flex布局，内置的默认对齐规则是justify-content: flex-end，也就是将所有分页内容靠右侧排列，这就是你看到默认右对齐的原因。

第一步：清理无效属性，给组件绑定自定义类名 #

先把之前写在TablePagination上的三个无效对齐属性删掉，给组件传入自定义样式类：

<TablePagination
    className={classes.paginationWrapper}
    rowsPerPageOptions={[5, 10, {label: 'All', value: -1}]}
    count={props.rowsCount}
    rowsPerPage={props.rowsPerPage}
    page={props.page}
    SelectProps={{
        inputProps: {'aria-label': 'rows per page'},
        native: true,
    }}
    onChangePage={props.onChangePage}
    onChangeRowsPerPage={props.onChangeRowsPerPage}
    ActionsComponent={TablePaginationActions}
/>

第二步：在样式定义中覆盖默认对齐规则 #

在你项目的makeStyles样式对象里，新增paginationWrapper类的规则，把根容器的Flex对齐改成居中即可：

const useStyles = makeStyles((theme) => ({
    // 新增的分页容器样式
    paginationWrapper: {
        display: 'flex',
        justifyContent: 'center',
    },
    // 你原有的其他样式
}));

第三步：微调自定义按钮组的偏移 #

你写的TablePaginationActions组件里，根节点默认加了marginLeft: theme.spacing(2.5)的左边距，这个边距会让按钮组相对于整体内容产生偏移，如果需要让所有分页元素完全居中对齐，可以把这个左边距调整为0：

const useStyles = makeStyles((theme) => ({
    root: {
        flexShrink: 0,
        marginLeft: 0, // 原代码这里是2.5的间距，会导致偏移
    },
}));

额外注意：如果TablePagination是放置在表格的TableCell单元格内部，需要给包裹它的TableCell也设置居中对齐属性（比如align="center"），避免外层单元格的默认布局把分页组件推离中心位置。

内容的提问来源于stack exchange，提问作者pece