全球css中的反应分页样式不起作用

Posted 2023-03-10

【中文标题】全球css中的反应分页样式不起作用

【英文标题】：react-pagination styling in global css not working

【发布时间】：2019-02-27 20:42:02

【问题描述】：

我只是在学习 react 并想使用 react-paginate 进行分页，但是即使我已经在我的全局 css 文件（index.css）上放置了必要的 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>

我的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;

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

【参考方案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'

【参考方案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;

【参考方案3】：

id 在 react 中不起作用，如果是 id，我们需要使用 refs。

我建议在这种情况下使用classes (className)

【讨论】：

嗨，我尝试将 id 更改为 className 并更新了 css（将 # 更改为 . ）但它仍然无法正常工作

如果类应用于 div 元素，你能在浏览器（开发者工具）中检查吗？并且只需添加一个类 .react-paginate （用于测试）

如果是，则项目中包含 index.css 存在问题