与风格的组件包裹元素时保留类名

我借力引导电网，所以我创建渲染元素组件，包括一个class：与风格的组件包裹元素时保留类名

const Row = props => (
    <div className="row" {...props}> 
    {props.children} 
    </div> 
);

现在，有时我想我行来填充，所以我试图总结我组件：

const PaddedRow = styled(Row)` 
    padding: 20px; 
`;

这适用于填充，但是当div呈现，它是无类。

Chrome的插件做出反应显示如下：

<Styled(Row)> 
    <Row className=".sc-cHds hQgwd"> 
    <div className=".sc-cHds hQgwd"> // No "row" class

是没可能为包装组件保存类的名字吗？

来源

2017-07-18 Mister Epic

您在做什么{...props}是spreading the passed-in props。 styled-components通过这些道具传递生成的className，并且因为您在className属性后应用传播，它将覆盖现有的类。

如果你写出来的，这是什么手工代码做到底什么样子：

<div className="row" className="sc-cHds">

这使得它明显是什么问题是：第二className声明压倒一切第一个！该解决方案，如果我是要严格坚持你的代码将串联类手动传递：

<div {...props} classname={`row ${props.className}`}>

这工作，但它不是的styled-components习惯用法。而不是styled(Row)包装的成分，我们建议对于<div />创建样式的组件：

const RowWrapper = styled.div` 
    padding: 20px; 
` 

const Row = props => (
    <RowWrapper classname="row"> 
    {props.children} 
    </RowWrapper> 
);

这是正路styled-components旨在使用，它也将自动与自动生成一个串联的Bootstrap类。

来源

2017-08-01 11:04:57 mxstbr

与风格的组件包裹元素时保留类名

回答

相关问题