Material-UI：如何使分頁按鈕居中？

Question

我試圖從 Material-UI 獲取分頁，但我想將箭頭按鈕和頁數居中。

我試圖通過創建一個<div style={{textAlign: "center"}}>來居中，但它不起作用，因為它全部放在一個盒子里。

有什么方法可以進入這個組件並使數字和按鈕進入中心？

Answer 1

他們的分頁組件正在使用display: flex 。 添加以下樣式規則應該可以實現您想要做的事情

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

Answer 2

如果您使用的是TablePagination ，則需要刪除將分頁內容向右推的分隔符div並將容器justify-content設置為center ：

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

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

如果您使用來自DataGrid的Pagination ，只需將justify-content設置為center ，因為容器已經是 flex ：

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 3

使用下面的代碼

<Box display="flex" justifyContent="center">
    <Pagination ... />
</Box>

Answer 4

為了使分頁居中，我建議你將它包裝在一個網格系統中，然后將它放在 flexGrow 屬性等於 1 的兩個網格項目的中間。

<Grid container>
  <Grid item sx={{ flexGrow: 1 }}></Grid>
  <Grid item>
    <Pagination />
  </Grid>
  <Grid item sx={{ flexGrow: 1 }}></Grid>
</Grid>