How to 'justify-content: center' for MUI Pagination?

user_12996287 0
Viewed 4628

I am trying to center the contents of the Pagination. However, this does not work. On console, I need to justify the ul wrapper and I can not find any information on MUI site related to the pagination props or a guide on how to center the item.

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;

and I have been trying on codesandbox as well. https://codesandbox.io/s/material-demo-zv1ps?file=/demo.js

Is there any way I can do this without having an additional box or Grid wrapper to wrap it out?

material-ui reactjs
3 Answers

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

user_125405000
user_44883320

We can also use Stack component:

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

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