Material UI pagination changing color

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;

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