I'm using the react-paginate 8.2.0 component in my React application along with Bootstrap for styling. I've encountered an issue with the pagination controls where the "Next/Previous" button text color is not visible when using Bootstrap button classes, particularly when using the "btn btn-primary" class.
Expected Behavior: The "Next/Previous" button should have readable text color and should not be in blue hyperlink, although maintaining users to click on it to navigate to the next page.
Current Behavior: When I apply the "btn btn-primary" class to the "Next/Previous" button, the text color becomes the same as the btn-primary color, making it difficult to read.
Screenshots:
Expected Behavior Screenshot
Current Behavior Screenshot
Code Snippet:
<ReactPaginate
className=" pagination justify-content-center gap-4 my-4"
nextLabel="Next"
pageCount={info?.pages}
previousLabel="Prev"
previousClassName="btn btn-primary"
nextClassName="btn btn-primary"
pageClassName ="page-item"
pageLinkClassName="page-link"
/>
Attempts to Resolve: I've tried adjusting the CSS styles for the pagination controls and Bootstrap button classes, but haven't been able to achieve the desired result without affecting the button functionality.