javascript - 将样式化组件作为类名传递给另一个组件

Question

我正在使用 react-paginate接受 props 中的类名来设置内部组件样式的库:

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

我也在使用 styled-components，所以我想避免使用纯 CSS 或 createGlobalStyle 来样式化 react 组件。有什么方法可以将样式从 styled-components 传递到 ReactPaginate 的 breakClassName 和 containerClassName 属性？

我试过了，但它不起作用，因为 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

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

---

更新:

你可以对类使用包装器

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