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