使用样式化组件包装元素时保留 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 propsstyled-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 与自动生成的连接起来。