3

I want to use "next" and "prev" text instead of next and prev icon in material-ui pagination. I didn't find any prop for the same. Can you guys give me some workaround.

AzadAnsari
  • 31
  • 1
  • 2
  • In their documentation, they have a custom pagination section here: https://material-ui.com/components/tables/#custom-pagination-actions. You would change the IconButtons to just normal Buttons with text. – Jack Jul 15 '20 at 14:18
  • This is a table Pagination, I am talking about only Pagination component – AzadAnsari Jul 15 '20 at 14:54
  • Does this have anything to do with the material-ui library for React? Or is it a special library? If it is not material-ui (material-ui.com), please remove the tag and link to the library you are using for pagination. – Jack Jul 15 '20 at 14:59
  • It's a material ui component https://material-ui.com/components/pagination/, thats why I have included the tag. – AzadAnsari Jul 16 '20 at 06:21

2 Answers2

4

One possible solution is to add the an :after and :before pseudo selector. Here's a code snippet using SCSS.

Make sure to add the pseudo selector to the button, in case you want it to be clickable.

 .MuiPagination-root {
   .MuiPagination-ul {
      flex-wrap: nowrap;
      li {
        &:first-child {
          flex-basis: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > button::after {
            margin-left: 10px;
            content: 'previous';
          }
        }
        &:last-child {
          flex-basis: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          > button::before {
            margin-right: 10px;
            content: 'next';
          }
        }
      }
    }
  }
isherwood
  • 58,414
  • 16
  • 114
  • 157
Miloš Lončar
  • 41
  • 4
0

You can use after and before pseudo selectors. For adding styles to buttons, you can use styled function. Styled function returns @mui component with custom styles. Click here to see docs.

import { styled } from "@mui/system";
import { Pagination } from "@mui/material";
const PaginationContainer = () => {

      const StyledPagination = styled(Pagination)({
            "& .MuiPagination-ul li:last-child": {
                marginLeft: "16px",
            },
            "& .MuiPagination-ul li:last-child button::before": {
                content: "'Next'",
                marginRight: "8px",
            },
            "& .MuiPagination-ul li:first-child": {
                marginRight: "16px",
            },
            "& .MuiPagination-ul li:first-child button::after": {
                content: "'Previous'",
                marginLeft: "8px",
            }
      });
    
      return <StyledPagination count={10} />
    };
Marin Barac
  • 1
  • 3