Pagination formatting in reactjs - css

Question

So i was looking into Pagination dependency in ReactJS. My code is working fine but the formatting of pagination is quite out of order. How can i improve my pagination outlook. It's currently showing as bullets
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={18}
totalItemsCount={this.state.totalBooks}
pageRangeDisplayed={3}
onChange={this.handlePageChange} />
It's showing in the browser as the attached image

Answer 1

From the docs of react-js-pagination:
The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.
So if you are using Bootstrap, it should just work.
If not the package provide some props to set classes to different elements, and then you should style them :
innerClass, activeClass, activeLinkClass, itemClass, itemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...

Answer 2

You have to acquire some notion about DOM scaffolding and CSS:
ul {
list-style: none;
padding: 0;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration:none;
color: #999;
}
ul li a:hover, ul li a.active {
color: #333;
}
<ul>
<li><a href="#" /><</a></li>
<li><a href="#" class="active"/>1</a></li>
<li><a href="#" />2</a></li>
<li><a href="#" />></a></li>
</ul>

Answer 3

So i found the Mobile Stepper of material-ui helpful in this case. I imported import MobileStepper from '#material-ui/core/MobileStepper';
I just had to make a simple updatePage(i) function that took +1 or -1 depending upon the next or previous page and corresponding any other function calls can be done in update page function. Hence easily pagination can be done and new information can be rendered accordingly. Although this is not the exact correct method, but it helped me with my functionality.
<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />