Question

我正在使用react-js-pagination npm包，但是样式对我不起作用。

>>> max_diff = 0
>>> max_elem = -1
>>> for a,b in zip(MIDYEAR_POPULATION, MIDYEAR_POPULATION[1:]) :
...     diff = abs(a[1]-b[1])
...     if diff > max_diff :
...         max_diff = diff
...         max_elem = b  # or a
... 
>>> print max_diff, max_elem
531497 (2019, 37589262)
>>>

bootstrap.less已移至scss。因此，我尝试使用bootstrap.scss，但效果不佳。

样式已损坏，如何解决？

Answer 1

我不熟悉react-js-pagination，但是我看了一下文档，它说与Bootstrap 3兼容，如果您使用的是Bootstrap 4，则必须添加2个其他道具：

itemClass="page-item"
linkClass="page-link"

https://www.npmjs.com/package/react-js-pagination

如果这行不通，我们可能需要更多代码来查看正在发生的事情。

Answer 2

您可以手动尝试。这对我有用。

.pagination {
  justify-content: center;
}

ul {
  list-style: none;
  padding: 0;
}

ul.pagination li {
  display: inline-block;
  width: 30px;
  border: 1px solid #e2e2e2;
  display: flex;
  justify-content: center;
  font-size: 25px;
}

ul.pagination li a {
  text-decoration: none;
  color: #337ab7;
  font-size: 20px;
}

ul.pagination li.active a {
  color: white;
}
ul.pagination li.active {
  background-color: #337ab7;
}

ul.pagination li a:hover,
ul.pagination li a.active {
  color: blue;
}

.page-selection {
  width: 48px;
  height: 30px;
  color: #337ab7;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

反应分页样式

2 个答案: