Custom next and prev button in material ui pagination

Viewed 5417

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.

1 Answers

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';
          }
        }
      }
    }
  }
Related