Pass Styled component as className to another component

user_9184865 0
Viewed 2830

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?

styled-components reactjs javascript
2 Answers

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

user_126564480

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.

user_74485040
Related