'React Pagination Styling

I am using react-js-pagination npm package, but styling doesn't work for me.

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

bootstrap.less was already moved to scss. So I tried with bootstrap.scss, but it didn't work as well.

The styling is broken, how can I fix?

htmlcssreactjs


Solution 1:[1]

You can try that manually. This works for me.

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

Solution 2:[2]

I am not familiar with react-js-pagination but I took a look on the documentation and it says is compatible with Bootstrap 3 and if you are using Bootstrap 4 you must to add 2 additional props :

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

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

If this won't work we may need more code to see what is happening.

Solution 3:[3]

add wrapper div to center the pagination

 <div className="d-flex justify-content-center mt-5">
          <Pagination
            ...
            // overwriting the style
            itemClass="page-item"
            linkClass="page-link"
          />
        </div>

then in css, for example

.page-item.active .page-link {
  background-color: #e61e4d;
  border-color: #e61e4d;
}

.page-link {
  color: #e61e4d;
}

.page-link:hover {
  color: #e61e4d;
}

Solution 4:[4]

https://www.npmjs.com/package/react-paginate

if you scroll down, you will see Props item Where they have specified how to style ReactPaginate.

example: adding className, pageClassName, pageLinkClassName to ReactPaginate component, so that you can style ReactPaginate in .css file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mingcnjs
Solution 2 mgiatti
Solution 3 Yilmaz
Solution 4 Quyen

Related Questions