Material UI pagination - How Can I use custom style for number of pages?

user_5766429 0
Viewed 662

I'm quite new to material-ui. I'm trying to build this component. enter image description here

I was able to do the style for the next and previous buttons the same as in the picture.

The normal style shows the number of pages as a numbered group besides each other like this:

enter image description here

Are there any properties that I can pass for the pagination component, in which I can change the style?

Here is the code:

import Pagination from "@material-ui/lab/Pagination";
import useStyles from "./styles";
const ReviewsPagination = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Pagination count={8} />
    </div>
  );
};

export default ReviewsPagination;

and the style file:

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    "& .MuiPagination-ul": {
      "& > li:first-child": {
        "& button": {
          borderRadius: "50%",
          border: "1px solid black",
          width: "48px",
          height: "48px",
        },
      },
      "& > li:last-child": {
        "& button": {
          borderRadius: "50%",
          border: "1px solid black",
          width: "48px",
          height: "48px",
        },
      },
    },
  },
});

export default useStyles;

Thank you!

material-ui reactjs pagination
1 Answers

you can use the usePagination hook to customize the pagination component. Like below:

export default function UsePagination() {
  const classes = useStyles();
  const { items } = usePagination({
    count: 10,
  });

  return (
    <nav>
      <ul className={classes.ul}>
        {items.map(({ page, type, selected, ...item }, index) => {
          let children = null;
          if (type === 'next' || type === 'previous') {
            children = (
              <button type="button" {...item}>
                {type}
              </button>
            );
          }else if(selected){
            children = <div>{`${page}/10`}</div>
          }
          return <li key={index}>{children}</li>;
        })}
      </ul>
    </nav>
  );
}

user_64270470
Related