0
558
ViewsMUI - 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?
·
Juan Pablo Isaza
1 answers
Answer question0
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>
);
}
·
Juan Pablo Isaza
Report
Answer question