如何在分页的移动视图上显示较少的页面数？

Question

问题

需要在移动视图中显示较少数量的页面，以便它可以与同一行中的标题（我的订单）对齐。

图书馆

material-ui/pagination

进展

能够在移动视图中删除 Next 和 Previous 内容，但无法找到任何现成的道具或任何 CSS 以减少移动视图中的页数

网络视图

移动视图

代码

CSS

@media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
    flex-wrap: nowrap;
    li {
        &:first-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            > button::before {
                margin-right: 10px;
                content: "Previous  ";
            }
        }
        &:last-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            > button::after {
                margin-left: 10px;
                margin-right: 20px;
                content: "  Next";
            }
        }
    }
}
}

自定义组件

    import React, { useState } from "react";
    import PropTypes from "prop-types";
    import Pagination from '@material-ui/lab/Pagination';

    export const CustomPagination = ({ onChange, totalRecords, currentPage, className, shape }) => {
        return (
            <Pagination
                count={totalRecords}
                shape={shape}
                className={className}
                onChange={onChange}
                page={currentPage}
            />
        )
    };

    CustomPagination.propTypes = {
        paginationLength: PropTypes.number,
        selectPage: PropTypes.func,
        activePage: PropTypes.number,
    };