Как передать реквизиты в styled-компонент при использовании React.cloneElement

Question

У меня есть компонент-обертка и несколько вложенных компонентов. Я передаю новый реквизит topMargin вложенным компонентам с React.cloneElement, но styled-components, кажется, полностью их игнорирует.

В этом примере я регистрирую реквизиты в StyledInner и Inner. Полученные реквизиты совсем другие. Чего мне не хватает?

Пример здесь: https://codesandbox.io/s/happy-maxwell-hgkp1

import React from "react";
import ReactDOM from "react-dom";

import styled from 'styled-components'

const StyledOuter = styled('div')`
  background:blue;
  padding: 1rem;
`

const Outer = props => {

  const proppedChildren = React.Children.map(
    props.children, (child)=> 
    React.cloneElement(child, { topMargin: '10px'})
  )

  return <StyledOuter>{proppedChildren}</StyledOuter>

}

const StyledInner = styled('div')`
  background: red;
  margin-top: ${props => {
    console.log(props)
    return props.topMargin || '50px'
  }};
`

const Inner = props => {
  console.log(props)

  return <StyledInner>{props.children}</StyledInner>
}

function App() {
  return (
    <div className="App">
      <Outer>
        <Inner>
          This is where the magic happens.
        </Inner>
        <Inner>
          Here too.
        </Inner>
      </Outer>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Регистрация реквизитов приводит к следующему:

Вкл. <Inner />

{
  children: "Here too.",
  topMargin: "10px"
}

Вкл <StyledInner />

{
  children: "Here too.", 
  forwardedComponent: Object, 
  forwardedRef: null, 
  theme: Object
}

Answer 1

Ваш Inner компонент получает реквизит topMargin, но затем он не передает реквизит StyledInner

const Inner = props => {
  console.log(props)
  return <StyledInner topMargin={props.topMargin}>{props.children}</StyledInner>
}