Передать компонент Styled как className другому компоненту

Question

Я использую act-paginate библиотека, которая принимает имена классов в подпорках для оформления внутренних компонентов:

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

Я также использую styled-components, поэтому я хотел бы избежать реагировать компоненты стиля, используя простой CSS или createGlobalStyle. Есть ли способ передать стили от styled-components до breakClassName и containerClassName реквизиты ReactPaginate?

Я пробовал это, но это не работает, потому что Button.toString() возвращает имя класса без стилей :

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

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

Код ниже также не работает, потому что Button имеет имя класса my-class-name, но это имя класса не имеет стилей:

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

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

Есть ли способ сделать это?

Answer 1

Я не думаю, что есть простой способ передать className таким образом. Но если вы пытаетесь стилизовать компонент из библиотеки, они должны позволить этому шаблону работать:

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

Стилизованные компоненты "обернутся" вокруг базового компонента и попробуют передать стили к нему. Большинство библиотечных компонентов должны работать с этим, но я не могу говорить за всех из них.

Answer 2

Вы пытались сделать <Button as={Component} />?

---

ОБНОВЛЕНИЕ:

Вы можете использовать обертку с классами

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