CODEWITHSUNDEEP
cssreactjsmaterial-ui
ReactLearner
ReactLearner

Reputation: 25

Material UI pagination how to change color

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

Upvotes: 0

Views: 3118

Answers (2)

wildgamer
wildgamer

Reputation: 355

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 />

Upvotes: 2

Mrsh1213
Mrsh1213

Reputation: 79

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'}
}
  })

Upvotes: 0

Related Questions