Material UI Pagination分页组件如何自定义页码样式？

可使用的修改方案如下 #

你可以通过MUI内置属性+样式覆盖两种方式调整页码样式： #

一、常用内置属性 #

• variant：设置分页项的样式类型，传outlined即可自带边框效果，无需手动编写border相关CSS
• shape：设置按钮形状，传circular即可直接实现圆形效果，无需手动写borderRadius
• size：快速调整按钮尺寸，可选值为small/medium/large，如果需要自定义尺寸可以忽略该属性
• renderItem：自定义每个分页项的渲染逻辑，适合需要完全自定义结构的场景
• classes：可直接覆盖组件内置的所有类名样式，比外层嵌套选择器优先级更高

二、修改代码示例 #

组件代码 #

import Pagination from "@material-ui/lab/Pagination";
import useStyles from "./styles";
const ReviewsPagination = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      {/* 直接传入variant和shape减少自定义CSS量 */}
      <Pagination count={8} variant="outlined" shape="circular" />
    </div>
  );
};
export default ReviewsPagination;

样式文件代码 #

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  root: {
    // 统一定义所有分页项的样式，包括上下页、普通页码、省略号
    "& .MuiPaginationItem-root": {
      width: "48px",
      height: "48px",
      borderColor: "#000",
      // 选中状态样式，可按设计稿调整色值
      "&.Mui-selected": {
        backgroundColor: "#000",
        color: "#fff",
        "&:hover": {
          backgroundColor: "#333",
        }
      },
      //  hover状态可按需自定义
      "&:hover": {
        backgroundColor: "#f5f5f5",
      }
    }
  },
});
export default useStyles;

如果需要完全自定义分页项的结构，可以用renderItem属性搭配PaginationItem组件实现，按需给每个项绑定自定义属性和样式即可。

内容的提问来源于stack exchange，提问作者Kareem Abdelwahed