Блог

Проблема

Нужно показать меньшее количество страниц в мобильном представлении, чтобы их можно было выровнять с заголовком (Мои заказы) в той же строке.

Библиотека

материал-пользовательский интерфейс / разбивка на страницы

Прогресс

Возможность удалить следующий и предыдущий контент в мобильном представлении, но не удалось найти ни готовых реквизитов, ни CSS для уменьшения количества страниц в мобильном представлении

Веб-просмотр

Мобильная версия

Код

CSS

 @media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
    flex-wrap: nowrap;
    li {
        amp;:first-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            > button::before {
                margin-right: 10px;
                content: "Previous  ";
            }
        }
        amp;: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,
    };