MUI - How to change the color of each Item in the Pagination component?

user_19485589 0
Viewed 53

I am trying to change the background color of each Item in my Pagination component using makeStyles.

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

const pagination = makeStyles({
  root: {
    "& .Mui-selected": {
      color: "white",
      backgroundColor: "black"
    }
  }
});

export default function App() {
  const paginationClass = pagination();

  return <Pagination count={10} page={10} className={paginationClass.root} />;
}

Here is a link of what I have currently done.

How can I change the color of each Pagination Item using makeStyles?

material-ui reactjs css javascript
1 Answers

To assign a background color to each item you need to wrap the Pagination component and set the pagination style (the makeStyles variable) to the wrapper. After that, we can can to handle the list of the pagination elements with the css property :nth-of-type().

PS: Starts at the second element, because the first and last are arrows.
import { Pagination } from "@material-ui/lab";
import { makeStyles } from "@material-ui/core";

const pagination = makeStyles({
  root: {
    "& li .Mui-selected": {
      color: "white",
      backgroundColor: "black"
    },
    "& li:nth-of-type(2) .Mui-selected": {
      backgroundColor: "red"
    },
    "& li:nth-of-type(3) .Mui-selected": {
      backgroundColor: "green"
    },
    "& li:nth-of-type(4) .Mui-selected": {
      backgroundColor: "orange"
    },
    "& li:nth-of-type(5) .MuiPaginationItem-root": {
      backgroundColor: "violet"
    },
    "& li:nth-of-type(6) .MuiPaginationItem-root": {
      backgroundColor: "magenta"
    }
    ....
  }
});

export default function App() {
  const paginationClass = pagination();

  return (
    <div className={paginationClass.root}>
      <Pagination count={10} page={2} />
    </div>
  );
}

Edit dazziling-code

user_155451160
Related