css - 如何在分页中的移动 View 中显示更少的页面？

Question

问题

需要在移动 View 中显示较少的页面，以便它可以与同一行中的标题(我的订单)对齐。

图书馆

material-ui/pagination

进展

能够删除移动 View 中的Next 和Previous 内容，但既不能找到任何现成的 prop(s) 也不能找到任何 CSS 来减少移动 View 中的页面数

WebView

移动 View

代码

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,
    };

Answer 1

我想出的解决方案之一是将组件分页包装在一个 Box 中，然后根据 View 更改其大小:

export function Test() {
  return;
  <>
    <Box sx={{ display: { xs: "none", md: "block" } }}>
      <Pagination
      />
    </Box>
    <Box sx={{ display: { xs: "block", md: "none" } }}>
      <Pagination
        size="small"
      />
    </Box>
  </>;
}
        </Box>