How can use Material ui custom pagination? - reactjs

Question

<Pagination count={35} variant="outlined" shape="rounded" color="primary"/>
This sets a default background colour and text colour, but I need custom background colour and text colour. I can't change it. I am trying to change the colour but I failed.

Answer 1

import * as React from 'react';
import Pagination from '#mui/material/Pagination';
import Stack from '#mui/material/Stack';
import { styled } from '#mui/system';
//Make a styled pagination component using styled API that overrides default style
const MyPagination = styled(Pagination)({
'& .Mui-selected': {
backgroundColor: 'red',
color:'#19D5C6',
},
"& .MuiPaginationItem-root": {
border: "1px solid red"
}
//There has a lot of Global classes. you have to use it according to your requirement
//Some classes are MuiPaginationItem-root, MuiPaginationItem-page and Mui-selected
});
export default function BasicPagination() {
return (
<Stack spacing={2}>
<MyPagination count={10} />
</Stack>
);
}
click to get all classes name

Answer 2

I would use a theme which will apply consistency throughout your project.
Codesandbox implementation here: https://codesandbox.io/s/mutable-river-e15yxw
Theme.js
import { ThemeProvider, createTheme } from "#mui/material/styles";
import CssBaseline from "#mui/material/CssBaseline";
export default function Theme(props) {
const theme = createTheme({
components: {
MuiPagination: {
styleOverrides: {
root: ({ ownerState }) => ({ backgroundColor: "#ffeeaa" })
}
},
MuiPaginationItem: {
styleOverrides: {
root: ({ ownerState }) => ({ backgroundColor: "#ffcc00", color: "maroon" })
}
}
}
});
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{props.children}
</ThemeProvider>
);
}
Demo.js
import * as React from "react";
import Pagination from "#mui/material/Pagination";
import Stack from "#mui/material/Stack";
import Theme from "./Theme";
export default function BasicPagination() {
return (
<Theme>
<Stack spacing={2}>
<Pagination count={10} sx={{ backgroundColor: "#eeffaa" }} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />
</Stack>
</Theme>
);
}

Answer 3

And there is another one if you prefer it, utilising the sx prop:
<Pagination
count={35}
shape="rounded"
color="primary"
sx={{
"& .MuiPagination-ul": { backgroundColor: "yellow" },
"& .MuiPaginationItem-page": { color: "red" },
"& .Mui-selected": { backgroundColor: "green" },
}}
/>
This is the result:
EDIT:
<Pagination
count={35}
shape="rounded"
color="primary"
sx={{
"& .MuiPagination-ul": { backgroundColor: "yellow" },
"& .MuiPaginationItem-page": { color: "red", border: "1px solid green" },
"& .Mui-selected": { backgroundColor: "green" },
}}
/>