React Pagination Styling

user_10649618 0
Viewed 5864

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?

reactjs css html
4 Answers

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.

user_88613730

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

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

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

user_158621640
Related