How to show less number of pages on mobile view in Pagination? - css

Question

Problem
Need to show less number of pages in mobile view so that it can be aligned with heading (My Orders) in the same line.
Library
material-ui/pagination
Progress
Able to remove Next and Previous content in the mobile view but neither able to find any out-of-the-box prop(s) nor any CSS to reduce number of pages in mobile view
Web view
Mobile View
Code
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";
}
}
}
}
}
Custom Component
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

One of the solutions I came up with is wrapping the component pagination inside a Box then changing its size depending on the 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>