Pass Styled component as className to another component

Question

I am using react-paginate library that accepts class names in props to style internal components:

<ReactPaginate
    ...
    breakClassName={'break-class-name'}
    containerClassName={'pagination-class-name'}
    activeClassName={'active-class-name'} />

I am also using styled-components , so I would like to avoid style react components using plain CSS or createGlobalStyle . Is there any way to pass styles from styled-components to breakClassName and containerClassName props of ReactPaginate ?

I tried this, but it does not work, because Button.toString() returns class name without styles:

const Button = Styled.button`
    color: green;
`

export default () => (
    <ReactPaginate
      ...
      breakClassName={Button.toString()} />
)

Code bellow also does not work, because Button has class name my-class-name , but this class name is without styles:

const Button = Styled.button.attrs({ className: 'my-class-name' })`
    color: green;
`

export default () => (
    <ReactPaginate
      ...
      breakClassName='my-class-name' />
)

Is there any way to do that?

Answer 1

have you tried to make <Button as={Component} /> ?

---

UPDATE:

You can use wrapper with classes

 const ReactPaginateStyled = styled(ReactPaginate)` &.break-class-name { //your styles } &.pagination-class-name { //your styles } &.active-class-name { //your styles } `;

Answer 2

I don't think there's a simple way to pass a className down like that. But if you're trying to style a component from a library, they should allow for this pattern to work:

const Button = styled(SomeLibraryComponent)`
  color: green;
`;

Styled components will "wrap" around the base component and try to pass styles to it. Most library components should work with this but I can't speak for all of them.