One of the simplest ways to customize a Material-UI component is by using the withStyles method. To understand how to implement custom styles, you can refer to the default Pagination styles.
Below is an example that demonstrates this:
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";
const StyledPagination = withStyles({
ul: {
display: "inline-flex"
}
})(Pagination);
export default function BasicPagination() {
return <StyledPagination count={10} color="primary" />;
}
If you opt for using makeStyles/useStyles, note that you can only utilize the className prop if you are customizing the root CSS class. In scenarios where customization of the ul CSS class is required, as seen in this part of the code compared to the root CSS class, utilizing the classes prop becomes necessary.
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";
const useStyles = makeStyles({
ul: {
display: "inline-flex"
}
});
export default function BasicPagination() {
const classes = useStyles();
return <Pagination count={10} color="primary" classes={classes}/>;
}
If your makeStyles call includes additional classes not meant for Pagination, it is advisable to be more specific in defining what goes into the classes prop:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Pagination from "@material-ui/lab/Pagination";
const useStyles = makeStyles({
paginationUL: {
display: "inline-flex"
}
});
export default function BasicPagination() {
const classes = useStyles();
return (
<Pagination
count={10}
color="primary"
classes={{ ul: classes.paginationUL }}
/>
);
}