Para asignar un color de fondo a cada elemento, debe ajustar el componente de paginación y establecer el estilo de paginación (la variable makeStyles ) en el contenedor. Después de eso, podemos manejar la lista de elementos de paginación con la propiedad css :nth-of-type() .

PD: Comienza en el segundo elemento, porque el primero y el último son flechas.

 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> ); }