全局 css 中的 react-pagination 样式不起作用

Question

我只是在学习 react 并想使用 react-paginate 进行分页，但即使我已经将必要的 css 放在我的全局 css 文件（index.css）中，样式也无法在 atm 中工作

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

我的 css 文件

#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;
}

任何帮助将不胜感激，谢谢

Answer 1

如果您使用 bootstrap 4，请使用以下类

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

Answer 2

您可以使用用于引导程序分页的引导程序类

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 */

下面的 css 为我工作。我把这个css放在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;
}