Pfthb

update2:

I tried targetting by creating class name but still I am not able to target ul tag, is there any way can we target ul tag in developer tools for ul tag if I give display flex its working fine, can you please help me

 <div className=classes.paginationT>

 <Pagination
 activePage=this.state.activePage
 itemsCountPerPage=10
 totalItemsCount=this.state.comments.length
 pageRangeDisplayed=5
 onChange=this.handlePageChange
 className=classes.paginationT
 />
 </div>


const styles = theme => (

 paginationT: 
 //border :'2xpx solid red',
 color: 'red',
 display:'flex'
 
);

update1:

I gave display: inline to this tag but still not working.

<Pagination
 activePage=this.state.activePage
 itemsCountPerPage=10
 totalItemsCount=this.state.comments.length
 pageRangeDisplayed=5
 onChange=this.handlePageChange

 style= display: ' inline' 
 />

further I debugged but not sure how to target ul tag, since I dont see any ul tag inside my pagination component.

• I got the pagination working but the problem is its not getting aligned horizontal.


• even I gave inline styles its not working.


• am I missing any values.


• can you tell me how to fix it.


• providing sandbox and code snippet below.

https://codesandbox.io/s/wnrxo98vr8
https://codesandbox.io/s/3rzvo66lwq

 <Pagination
 activePage=this.state.activePage
 itemsCountPerPage=10
 totalItemsCount=this.state.comments.length
 pageRangeDisplayed=5
 onChange=this.handlePageChange
 />

From the react-js-pagination npm page:

The component comes with no built-in styles. HTML layout compatible
with Bootstrap pagination stylesheets.

So - it does not come with styles. It is 100% up to you to write your own CSS to style it. However, it is compatible with bootstrap styles. So the fastest thing to do is just include Bootstrap styles.

npm install --save bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

https://codesandbox.io/s/rm5xj7qy3q

It's probably not exactly what you want, but if you read the documentation, you'll know what you're getting.

Also, you're using Material Design, which has it's own pagination components...

Read About Material Design Pagination Here.

Please try to customize the Ul and Li tags. Please find the improved code.

https://codesandbox.io/s/64223kj733