11import Button from "@mui/material/Button" ;
2- import { makeStyles , useTheme } from "@mui/styles" ;
32import useMediaQuery from "@mui/material/useMediaQuery" ;
43import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft" ;
54import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight" ;
5+ import { useTheme } from "@emotion/react" ;
66import { PageButton } from "./PageButton" ;
77import { buildPagedList } from "./utils" ;
88
@@ -21,7 +21,6 @@ export const PaginationWidgetBase = ({
2121} :PaginationWidgetBaseProps ) :JSX . Element | null => {
2222const theme = useTheme ( ) ;
2323const isMobile = useMediaQuery ( theme . breakpoints . down ( "md" ) ) ;
24- const styles = useStyles ( ) ;
2524const numPages = Math . ceil ( count / limit ) ;
2625const isFirstPage = page === 0 ;
2726const isLastPage = page === numPages - 1 ;
@@ -31,9 +30,19 @@ export const PaginationWidgetBase = ({
3130}
3231
3332return (
34- < div className = { styles . defaultContainerStyles } >
33+ < div
34+ css = { {
35+ justifyContent :"center" ,
36+ alignItems :"center" ,
37+ display :"flex" ,
38+ flexDirection :"row" ,
39+ padding :"20px" ,
40+ } }
41+ >
3542< Button
36- className = { styles . prevLabelStyles }
43+ css = { {
44+ marginRight :theme . spacing ( 0.5 ) ,
45+ } }
3746aria-label = "Previous page"
3847disabled = { isFirstPage }
3948onClick = { ( ) => {
@@ -84,17 +93,3 @@ export const PaginationWidgetBase = ({
8493</ div >
8594) ;
8695} ;
87-
88- const useStyles = makeStyles ( ( theme ) => ( {
89- defaultContainerStyles :{
90- justifyContent :"center" ,
91- alignItems :"center" ,
92- display :"flex" ,
93- flexDirection :"row" ,
94- padding :"20px" ,
95- } ,
96-
97- prevLabelStyles :{
98- marginRight :theme . spacing ( 0.5 ) ,
99- } ,
100- } ) ) ;