如何自定义 mui 分页栏？

Question

我想要自定义 mui 分页栏。我想自定义第一页、最后一页按钮 <、> 以及“上一页”、“下一页”字样。

Answer 1

您可以像这样覆盖这些组件。他们的文档中有一个部分在这里，PaginationItem 的 API在这里。

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