如何为 MUI 分页“调整内容：中心”？

Question

我正在尝试将分页的内容居中。然而，这是行不通的。在控制台上，我需要证明 ul 包装器的合理性，但我在 MUI 站点上找不到与分页道具相关的任何信息或如何使项目居中的指南。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      marginTop: theme.spacing(2),
   
    },
  },
  pagination: {
    alignItems: 'center',
    justify: 'center',
  }
}));

const Paginated = (props) => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Pagination className={classes.pagination} count={props.totalPage} color='primary' />
    </div>
  );
};

export default Paginated;

我也一直在尝试codesandbox。https://codesandbox.io/s/material-demo-zv1ps?file=/demo.js

有什么方法可以在没有额外的盒子或网格包装器来包装它的情况下做到这一点？

Answer 1

我们还可以使用Stack 组件：

import Stack from '@mui/material/Stack';

<Stack alignItems="center">
    <Pagination className={classes.pagination} count={props.totalPage} color='primary' />
</Stack>

Answer 2

  root: {
    "& > *": {
      marginTop: theme.spacing(2),
      justifyContent:"center",
      display:'flex'
    }
  }