将 Styled 组件作为 className 传递给另一个组件答案

【问题标题】：Pass Styled component as className to another component将 Styled 组件作为 className 传递给另一个组件
【发布时间】：2020-04-02 01:54:26
【问题描述】：

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

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

我也在使用 styled-components，所以我想避免使用纯 CSS 或 createGlobalStyle 的样式反应组件。有没有办法将样式从styled-components 传递到breakClassName 和ReactPaginate 的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' />
)

有什么办法吗？

【问题讨论】：

用样式组件包装组件并向样式组件添加嵌套规则似乎是这里的唯一方法

标签： javascript reactjs styled-components

【解决方案1】：

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

更新：

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

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

【讨论】：

A 试过这个，但不幸的是它没有解决问题。我更新了我的问题以获取更多详细信息。
这个解决方案不起作用，因为 ReactPaginate 确实有一个 className 属性。

【解决方案2】：

我认为没有一种简单的方法可以像这样传递一个类名。但是，如果您尝试为库中的组件设置样式，它们应该允许这种模式起作用：

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

样式化组件将“包裹”在基础组件周围，并尝试将样式传递给它。大多数库组件都应该适用于此，但我不能代表所有组件。

【讨论】：

我更新了我的问题以获取更多详细信息。不幸的是，该库不接受 className 在 props 中，即使它不能解决问题，因为我需要样式化这个库的更多内部组件，而不仅仅是容器。
是的，你是对的。因为 ReactPaginate 不接受 className，所以不能将 styled() 包裹起来。