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

【问题标题】：Preserve class name when wrapping element with styled-components使用样式组件包装元素时保留类名
【发布时间】：2017-12-23 18:04:01
【问题描述】：

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

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

现在，有时我希望我的行被填充，所以我尝试包装我的 Row 组件：

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

这应用了填充，但是当 div 被渲染时，它没有类。

Chrome 的 React 插件显示如下：

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

不能为被包装的组件保留类名吗？

【问题讨论】：

标签： reactjs styled-components

【解决方案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 类与自动生成的类连接起来。

【讨论】：