CODEWITHSUNDEEP
reactjsnext.jsmaterial-ui
Muhammad Mehedi Hasan
Muhammad Mehedi Hasan

Reputation: 3

How can use Material ui custom pagination?

<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.

Upvotes: 0

Views: 1871

Answers (3)

Arifur Rahaman
Arifur Rahaman

Reputation: 574

    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

Upvotes: 1

Dobromir Kirov
Dobromir Kirov

Reputation: 1033

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:

enter image description here

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" },
      }}
    />

enter image description here

Upvotes: 0

Ryan
Ryan

Reputation: 614

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

Upvotes: 1

Related Questions