how can I customize mui pagination bar?

Question

I want customize mui pagination bar. I want customize first page, last page buttons <, > with 'prev', 'next' words.

Answer 1

You can override these components like this. There's a section in their documentation here and the PaginationItem's API here.

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      components={{
        last: (props) => <button {...props}>Last</button>,
        next: (props) => <button {...props}>Next</button>,
        first: (props) => <button {...props}>First</button>,
        previous: (props) => <button {...props}>Previous</button>
      }}
      {...item}
    />
  )}
  showFirstButton
  showLastButton
/>