使用样式化组件包装元素时保留 class 名称
Preserve class name when wrapping element with styled-components
我正在利用 Bootstrap 网格,因此我正在创建组件来呈现包含 class
:
的元素
const Row = props => (
<div className="row" {...props}>
{props.children}
</div>
);
现在,有时我希望我的行被填充,所以我尝试包装我的 Row
组件:
const PaddedRow = styled(Row)`
padding: 20px;
`;
这应用了填充,但是当呈现 div
时,它没有 class。
Chrome 的 React 插件显示如下:
<Styled(Row)>
<Row className=".sc-cHds hQgwd">
<div className=".sc-cHds hQgwd"> // No "row" class
是否无法保留包装组件的 class 名称?
你用 {...props}
做的是 spreading the passed-in props。 styled-components
通过这些道具传递生成的 className
,并且因为您在 className
属性 之后应用点差,它会覆盖现有的 class.
如果您要手动写出您的代码最终执行的操作,它会是这样的:
<div className="row" className="sc-cHds">
这让问题变得显而易见:第二个 className
声明覆盖了第一个 !如果我严格遵守您的代码,解决方案是手动连接传入的 class:
<div {...props} className={`row ${props.className}`}>
这有效,但是它不是 styled-components
的惯用用法。我们建议为 <div />
:
创建一个带样式的组件,而不是用 styled(Row)
包装组件
const RowWrapper = styled.div`
padding: 20px;
`
const Row = props => (
<RowWrapper className="row">
{props.children}
</RowWrapper>
);
这是 styled-components
的使用方式,它还会自动将您的 Bootstrap class 与自动生成的连接起来。
我正在利用 Bootstrap 网格,因此我正在创建组件来呈现包含 class
:
const Row = props => (
<div className="row" {...props}>
{props.children}
</div>
);
现在,有时我希望我的行被填充,所以我尝试包装我的 Row
组件:
const PaddedRow = styled(Row)`
padding: 20px;
`;
这应用了填充,但是当呈现 div
时,它没有 class。
Chrome 的 React 插件显示如下:
<Styled(Row)>
<Row className=".sc-cHds hQgwd">
<div className=".sc-cHds hQgwd"> // No "row" class
是否无法保留包装组件的 class 名称?
你用 {...props}
做的是 spreading the passed-in props。 styled-components
通过这些道具传递生成的 className
,并且因为您在 className
属性 之后应用点差,它会覆盖现有的 class.
如果您要手动写出您的代码最终执行的操作,它会是这样的:
<div className="row" className="sc-cHds">
这让问题变得显而易见:第二个 className
声明覆盖了第一个 !如果我严格遵守您的代码,解决方案是手动连接传入的 class:
<div {...props} className={`row ${props.className}`}>
这有效,但是它不是 styled-components
的惯用用法。我们建议为 <div />
:
styled(Row)
包装组件
const RowWrapper = styled.div`
padding: 20px;
`
const Row = props => (
<RowWrapper className="row">
{props.children}
</RowWrapper>
);
这是 styled-components
的使用方式,它还会自动将您的 Bootstrap class 与自动生成的连接起来。