reactjs - 如何为 MUI 分页设置 'justify-content: center'？

Question

我试图将分页的内容居中。但是，这不起作用。在控制台上，我需要证明 ul 包装器的合理性，但在 MUI 站点上找不到任何与分页 Prop 相关的信息或有关如何将项目居中的指南。

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;

我也一直在尝试使用codeandbox。 https://codesandbox.io/s/material-demo-zv1ps?file=/demo.js
有什么方法可以做到这一点而无需额外的盒子或网格包装器来包装它？

Answer 1

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