I am using material ui to display a pagination bar for my website. Its all working fine but i want to customize it. Having had a read of their docs i have implemented a theme however i am unable to get the color of the numbers to change to white. I have added a secondary color but it does not get applied. Here is my pagination component and a picture of my output. Thanks

const theme = createTheme({
    palette:{
      primary:{
        main: '#00ADB5',
        contrastText: '#EEE'
      },
      secondary:{
        main: '#EEE'
      }
      
    },
    typography:{
      fontFamily:[
        'Poppins'
      ],
      fontSize: 18,
    }
  })

  const handleChange = (page) => {
    setPage(page)
    window.scroll(0,0)
  }

  return (
    <ThemeProvider theme={theme}>
      <Stack spacing={2}>
        <Pagination onChange={(e) => handleChange(e.target.textContent)} count={numberOfPages} size='large' color='primary' hidePrevButton hideNextButton />
      </Stack>
    </ThemeProvider>
  )
}

My current output

CodePudding user response：

test like code:

const theme = createTheme({
    palette:{
      primary:{
        main: '#00ADB5',
        contrastText: '#EEE'
      },
      secondary:{
        main: '#EEE'
      }
      
    },
    typography:{
      fontFamily:[
        'Poppins'
      ],
      fontSize: 18,
    },
MuiPagination:{
root:{background-color:'#ff0000'},
text:{color:'#00ff11'}
}
  })

CodePudding user response：

About your question, if you want to change the number color in pagination, you can try to use sx to setting the color, here is the code you can try.

<Pagination onChange={handleChangePage} sx={{button:{color: '#ffffff'}}} count={searchResult.searchContext(data).length} size='large' color='primary' hidePrevButton hideNextButton />