反应分页样式答案

【问题标题】：React Pagination Styling反应分页样式
【发布时间】：2020-03-07 02:37:44
【问题描述】：

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

import Pagination from "react-js-pagination";
import "bootstrap/less/bootstrap.less";

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

样式坏了，我该如何修复？

【问题讨论】：

你使用的是什么版本的 bootstrap 和 react-js-pagination？
引导 v4.4.1

标签： html css reactjs

【解决方案1】：

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

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

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

如果这不起作用，我们可能需要更多代码来查看发生了什么。

【讨论】：

【解决方案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;
}

【讨论】：