我正在使用 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' />
)
有什么办法吗?
最佳答案
你试过制作<Button as={Component} />
吗? ?
更新:
你可以对类使用包装器
const ReactPaginateStyled = styled(ReactPaginate)`
&.break-class-name {
//your styles
}
&.pagination-class-name {
//your styles
}
&.active-class-name {
//your styles
}
`;
关于javascript - 将样式化组件作为类名传递给另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60976624/