CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Meeth46
Meeth46

Reputation: 81

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

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?

Upvotes: 1

Views: 1459

Answers (1)

Anton
Anton

Reputation: 8508

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

Upvotes: 5

Related Questions