javascript - 将 Styled 组件作为 className 传递给另一个组件

Question

我正在使用react-paginate库，它接受道具中的类名来设置内部组件的样式：

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

我也在使用styled-components，所以我想避免使用纯 CSS 或createGlobalStyle. 有没有办法将样式从styled-componentstobreakClassName和containerClassNameprops of传递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' />
)

有没有办法做到这一点？

标签： javascriptreactjsstyled-components

Answer 1

你试过<Button as={Component} />吗？

---

更新：

您可以将包装器与类一起使用

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