question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Compatibility with styled-components

See original GitHub issue

Issue Description

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11

github_iconTop GitHub Comments

13reactions
mikdatdogrucommented, Oct 1, 2020

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>

image

3reactions
tpinnecommented, Oct 1, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

FAQs - styled-components
Which browsers are supported? ... styled-components supports the same set of browsers as the current React version. ... Evergreen browsers include Chrome and ......
Read more >
React 18 compatibility? · Issue #3738 · styled-components ...
After upgrading React to v18 (in combination with Next.js), I'm getting this error: TS2786: 'GlobalStyle' cannot be used as a JSX component.
Read more >
How To Use Styled-Components In React - Smashing Magazine
Styled components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and ...
Read more >
How To Use React Styled Components Efficiently - Copycat
The CSS cascade works just the same like it does in plain vanilla CSS i.e. children elements are capable of inheriting styles from...
Read more >
Using Styled Components - Expo Documentation
Styled Components is a CSS-in-JS solution that enables you to create React components with a given style very easily. Using styled-components with Expo, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found