Material UI pagination changing color

Question

I am trying to do some pagination, which in theory is working but the colour of the outline and number are coming out black and my background is very dark so it took me a while to even realised it was working because I couldn't see it at first.

I am trying to change the colour of those parts (or at least the colour of the number) however, this is not working. I have tried to follow different suggestions (including <PaginationItem>) but none is doing the job. Does any one has any suggestions? at what is wrong? Thank you in advance!

import React from 'react';
import Pagination from "@material-ui/lab/Pagination";
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    selected: {
        color:'#ffffff',
    },
}));

const Paginations = ({ scientistQuestions, paginate, scientistsPerPage }) => {
   const classes = useStyles();

   const pageNumbers = [];
   for (let i = 1; i <= Math.ceil(scientistQuestions / scientistsPerPage); i++) {
       pageNumbers.push(i)
   }
   console.log(pageNumbers)
   const handlePage = (e) => {
       paginate(Number(e.target.innerText));
   }
    
    return ( 
        <div>
            <Pagination  className={classes.root} count={3} variant="outlined" onClick={(e)=> handlePage(e)} color="primary"  />
        </div>      
    );
}
 
export default Paginations;

Paba

Answer 1

First, you declared a class selected but used classes.root.

Second, assigning the style to root doesn't override the item's color. In order to do that, you need to use the child selector: .MuiPaginationItem-root (source)

const useStyles = makeStyles(() => ({
  ul: {
    "& .MuiPaginationItem-root": {
      color: "#fff"
    }
  }
}));

export default function BasicPagination() {
  const classes = useStyles();
  return <Pagination classes={{ ul: classes.ul }} count={10} />;
}

https://codesandbox.io/s/matreial-ui-pagination-item-style-ign5e?file=/demo.tsx

Reconnaissance

oh, thank you! yes, the root/selected was an editing error here as I was trying both syntax earlier. Thank you so much for the clarification. – Paba

Sure, no problem. Good luck! – Reconnaissance

life saver !, needed the same UI, but different colors <3 – Carnauba

How to change the background of of the active li, cause this is changing the background color of the inactive li – Coomb

Answer 2

You can use CSS or SASS to change color.

.MuiPagination-root {
  button {
    color: red !important;
 }
}

Barela

Answer 3

Here's the updated version for anyone using the latest version of mui

MuiPagination: {
    styleOverrides: {
        root: {
            button: {
                color: '#fff',
            },
        },
    },
}

Fugacious

Answer 4

I just have the same problem with Pagination. You can modify the class: '.Mui-selected' and also use !Important for your setting. find below my example:

import * as React from 'react';
import Pagination from '@mui/material/Pagination';

export default function PageNav() {
    const main = {
            '& .Mui-selected': {
                bgcolor:'#B88E2F !Important' ,
            },
        }
    
  return (
      <Pagination count={3} shape="rounded" size="large" sx = {main} />
  );
}

Eddra