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}传播传入的 propsstyled-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 回答