Material UI 分页 - 如何使用自定义样式设置页数？答案

【问题标题】：Material UI pagination - How Can I use custom style for number of pages?Material UI 分页 - 如何使用自定义样式设置页数？
【发布时间】：2022-01-12 00:16:25
【问题描述】：

我对@987654325@ 很陌生。我正在尝试构建这个组件。

我能够为下一个和上一个按钮设置与图片中相同的样式。

普通样式将页数显示为一个相互并排的编号组，如下所示：

是否有任何我可以为分页组件传递的属性，我可以在其中更改样式？

代码如下：

import Pagination from "@material-ui/lab/Pagination";
import useStyles from "./styles";
const ReviewsPagination = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Pagination count={8} />
    </div>
  );
};

export default ReviewsPagination;

和样式文件：

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    "& .MuiPagination-ul": {
      "& > li:first-child": {
        "& button": {
          borderRadius: "50%",
          border: "1px solid black",
          width: "48px",
          height: "48px",
        },
      },
      "& > li:last-child": {
        "& button": {
          borderRadius: "50%",
          border: "1px solid black",
          width: "48px",
          height: "48px",
        },
      },
    },
  },
});

export default useStyles;

谢谢！

【问题讨论】：

标签： reactjs pagination material-ui

【解决方案1】：

您可以使用usePagination 挂钩来自定义分页组件。如下：

export default function UsePagination() {
  const classes = useStyles();
  const { items } = usePagination({
    count: 10,
  });

  return (
    <nav>
      <ul className={classes.ul}>
        {items.map(({ page, type, selected, ...item }, index) => {
          let children = null;
          if (type === 'next' || type === 'previous') {
            children = (
              <button type="button" {...item}>
                {type}
              </button>
            );
          }else if(selected){
            children = <div>{`${page}/10`}</div>
          }
          return <li key={index}>{children}</li>;
        })}
      </ul>
    </nav>
  );
}

【讨论】：