I'm currently attempting to customize the table pagination in Material-ui V5.0 using React by adjusting the width, height, and color. However, I am facing an issue where the classes are not being accepted. The pagination relies on .MuiToolbar-root, so when I try to make changes via a .css file, it disrupts the MuiToolbar located at the top of the App page. Can someone provide guidance on how to implement these necessary changes without disrupting the Appbar at the top? Additionally, there is a need to modify the padding of .MuiTableCell-root as well. Below is my code for reference. Any help or suggestions would be greatly appreciated.
// Component SupplierTable
import React, {useState} from 'react'
import './SupplierTable.css';
import SupplierForm from './SupplierForm';
import PageHeader from '../components/PageHeader';
import FactoryIcon from '@mui/icons-material/Factory';
import * as supplierService from '../services/EmployeeService';
import Controls from "../components/controls/Controls";
import { InputAdornment } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import AddIcon from '@mui/icons-material/Add';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import useTable from "../components/useTable";
import { makeStyles } from '@mui/styles';
import ModeEditOutlineIcon from '@mui/icons-material/ModeEditOutline';
import { TableRow, TableBody, TableCell } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import Popup from '../components/Poup';
import Notification from '../components/Notifications';
import ConfirmDialog from '../components/ConfirmDialog';
import Grid from '@mui/material/Grid';
const useStyles = makeStyles(theme => ({
overrides: {
'&.MuiTablePagination-root':{
width: '960px',
height: '35px',
backgroundColor: '#a9aeb3',
color: 'rgb(41, 39, 39)',
fontFamily: 'Arial, Helvetica, sansSerif',
fontWeight: '700',
}
},
pageContent: {
margin: theme.spacing(1),
padding: theme.spacing(3)
},
searchInput: {
width: '50%'
},
newButton: {
position: 'absolute',
right: '0px'
},
}));
// Rest of the code follows...