react-pagination styling in global css not working

Question

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

Answer 1

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