如何为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;

我也试过密码盒。https://codesandbox.io/s/material-demo-zv1ps?file=/demo.js

有什么办法可以做到这一点，而不需要额外的盒或网格包装包装出来呢？

Answer 1

​

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

​

Answer 2

我们也可以使用堆栈组件

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

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

Answer 3

margin: "auto"为我工作

root: {
  margin: "auto",
},

我从这里得到了一个想法：4种在物料界面中对组件进行中心化的方法