0
559
ViewsMUI: ¿cómo cambiar el color de cada elemento en el componente de paginación?
Estoy tratando de cambiar el color de fondo de cada elemento en mi componente de paginación usando 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} />; }Aquí hay un enlace de lo que he hecho actualmente.
¿Cómo puedo cambiar el color de cada elemento de paginación usando makeStyles ?
·
Juan Pablo Isaza
1 answers
Answer question0
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> ); } 
·
Juan Pablo Isaza
Report
Answer question