How can use Material ui custom pagination?-CodePudding

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

CodePudding user response：

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

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