Compatibility with styled-components

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

[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.