2

我正在利用 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

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

4

1 回答 1

3

你正在做的{...props}是传播传入的 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-01T11:04:57.313 回答