i'm just learning react and wanted to used react-paginate for pagination purpose but the styling is not working atm even though i've already put the necessary css on my global css file(index.css)
<div id="react-paginate">
<ReactPaginate
previousLabel={'<'}
nextLabel={'>'}
breakLabel={<a href="">...</a>}
breakClassName={'break-me'}
pageCount={pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={10}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
</div>
my css file
#react-paginate ul {
display: inline-block;
margin-left: 20px;
padding-left: 0;
}
#react-paginate li {
display: inline-block;
border: 1px solid rgb(224, 224, 224);
color: #000;
cursor: pointer;
margin-right: 3px;
border-radius: 5px;
margin-bottom: 5px;
}
#react-paginate li a {
padding: 2px 5px;
display: inline-block;
color: #000;
outline: none;
}
#react-paginate li.active {
background: rgb(224, 224, 224);
outline: none;
}
any help would be appreciated, thank you
If you are using bootstrap 4 use below classes
breakClassName={'page-item'}
breakLinkClassName={'page-link'}
containerClassName={'pagination'}
pageClassName={'page-item'}
pageLinkClassName={'page-link'}
previousClassName={'page-item'}
previousLinkClassName={'page-link'}
nextClassName={'page-item'}
nextLinkClassName={'page-link'}
activeClassName={'active'}
You can use bootstrap classes which are for bootstrap pagination as you have
containerClassName={'pagination'} /* as this work same as bootstrap class */
subContainerClassName={'pages pagination'} /* as this work same as bootstrap class */
activeClassName={'active'} /* as this work same as bootstrap class */
below css work for me. I put this css in app.global.css
.pagination > li {
display: inline-block;
padding-left: 0;
}
.pagination > li {
list-style: none;
border: 0.9px solid;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #2c689c;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
.pagination>li.active>a {
color: #fff;
background-color: #218838;
border-color: #1e7e34;
}
/* Style the active class (and buttons on mouse-over) */
.pagination > li > a:hover {
background-color: #218838;
color: white;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
padding: 0px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
display: none!important;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-bottom-right-radius: 4px;
margin-right: 0;
padding: 0px!important;
border-top-right-radius: 4px;
display: none!important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.