使用样式化组件包装元素时保留类名

Question

我正在利用Bootstrap网格，因此我正在创建包含1.9.15的元素的组件：

class

现在，有时我希望我的行被填充，所以我试图包裹我的const Row = props => ( <div className="row" {...props}> {props.children} </div> ); 组件：

Row

这适用于填充，但是当渲染const PaddedRow = styled(Row)` padding: 20px; `; 时，它没有类。

Chrome的React插件显示以下内容：

div

是否无法保留包装组件的类名？

Answer 1

您对{...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类与自动生成的类连接起来。