有没有一种方法可以使用自定义图标进行材质ui的分页

Question

是否可以在材质ui中使用自定义图标进行分页？

Material UI Pagination Documentation， CodeSandbox Demo

我想更改默认的左右人字形（用于导航）

有没有一种方法可以使用Material ui的现有组件来实现？

Answer 1

您不能直接更改图标，但是可以使用usePagination

自定义完整的分页

<ul className={classes.ul}>
  {items.map(({ page, type, selected, ...item }, index) => {
    let children = null;

    if (type === 'start-ellipsis' || type === 'end-ellipsis') {
      children = '…';
    } else if (type === 'page') {
      children = (
        <IconButton  style={{ 
          fontWeight: selected ? 'bold' : undefined, 
         backgroundColor: selected ? 'rgba(0, 0, 0, 0.04)' : 'white',
          width: 50, 
          height:50
        }} {...item}>
          {page}
        </IconButton >
      );
    } else {
      children = (
        <IconButton  {...item}>
          {type === 'previous' ? <FastRewindIcon/> : <FastForwardIcon/>}
        </IconButton >
      );
    }
    return <li key={index} style={{ margin: 'auto 0'}}>{children}</li>;
  })}
</ul>