Compatibility with styled-components

[tpinne]

It would be nice to have direct compatibility with styled-component by accepting the standard className prop as alternative to the containerClassName prop. Otherwise styling with styled-components is only possible by wrapping the component in an extra wrapper component.

const StyledReactPaginate = styled(ReactPaginate)`
  a {
    cursor: pointer;
  }
  .selected {
    background: lime;
  }
`;

[definoob]

Same here.
Tried the code below but doesn't work.

const Paginate = styled(ReactPaginate).attrs({
  containerClassName: "container",
  breakClassName: "break-me",
  activeClassName: "active"
})`
  &.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
  }
  &.break-me {
    cursor: default;
  }
  &.active {
    background-color: #0366d6;
    border-color: transparent;
    color: white;
    min-width: 32px;
  }
`;

Anyway, classNames are applied.

[tpinne]

Try break-me and active without the & because they are applied to elements further down the Dom. The container Styles should be applied though, as I guess from the couch.

[definoob]

Container is not applied.

[tpinne]

My bad, has been late. The essential generated classname from styled components is still missing, of course.

[shadrech]

Any plans to make this compatible with styled-components?

[mikdatdogru]

I temporarily solved this problem by wrapping it with the styled component.

const StyledPaginateContainer = styled.div`
  .pagination {
    color: #0366d6;
  }
  .break-me {
    cursor: default;
  }
  .active {
    border-color: transparent;
    background-color: #0366d6;
    color: white;
  }
`;

<StyledPaginateContainer>
    <ReactPaginate
     previousLabel="previous"
     nextLabel="next"
     breakLabel="..."
     breakClassName="break-me"
     pageCount={20}
     marginPagesDisplayed={2}
     pageRangeDisplayed={5}
     onPageChange={pagination => {
        console.log(pagination);
     }}
     containerClassName="pagination"
     activeClassName="active"
        />
</StyledPaginateContainer>

[tpinne]

I temporarily solved this problem by wrapping it with the styled component.

We use the same approach to work around that even before I opened this issue. But compatibility would be easily achieved with making (additional) use of the standard className prop.

Personally I don't like having to use a special prop just to assign the class name for the outer most container of a component.

[amantiwari1]

I temporarily solved this problem by wrapping it with the styled component.

but it is not working for .pagination > .active > a any idea how to fix it?

[makotot]

I was facing same issue and so have created headless pagination component like this.

[MonsieurV]

Hi,

We've added the className prop. Tell us if you still encounter any issue with styled-components.

Thanks for the reports and workarounds!

[MonsieurV]

You can find an example in demo with styled-components:

https://github.com/AdeleD/react-paginate/blob/master/demo/js/demo.js#L11

#397