材质UI：如何居中分页按钮？

Question

我试图得到分页从材料UI，但我想中心的箭头和页数的按钮。

我试图通过创建

有没有办法进入这个组件，让数字和按钮进入中心？




Answer 1

如果您使用的是TablePagation，您需要删除将分页内容向右推的间隔器div，并将容器证明内容设置为中心：

import TablePagination, {
  tablePaginationClasses
} from "@mui/material/TablePagination";

<TablePagination
  sx={{
    [`& .${tablePaginationClasses.spacer}`]: {
      display: "none"
    },
    [`& .${tablePaginationClasses.toolbar}`]: {
      justifyContent: "center"
    }
  }}
  {...}
/>

如果您使用的是来自DataGrid的Pagination，只需将justify content设置为center，因为容器已经是柔性的：

import { makeStyles } from "@mui/styles";
import { paginationClasses } from "@mui/material/Pagination";

const useStyles = makeStyles({
  root: {
    [`& .${gridClasses.footerContainer}`]: {
      justifyContent: "center"
    }
  }
});

<DataGrid pagination {...data} className={classes.root} />

Answer 2

他们的分页组件使用show： flex。添加以下样式规则应该可以实现您想要做的事情

.MuiPagination-ul { justify-content: center; }