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