Dynamic styled(component) by passing component as prop

Version

styled-components: ^2.2.1 babel-plugin-styled-components: ^1.1.7

Steps to reproduce

1. Create a styled component that takes a prop containing a component and return it.

const Icon = styled(({ component }) => component)`
  background: red;
`

1. Use the styled component in your render & pass it a ‘component’ prop.

<Icon component={<MyCustomIco fill={color} width={size} height={size} />} />

1. The outcome should be that the style is applied to

<MyCustomIco />

Expected Behavior

Created a generic styled component, for example Icon. Then I’m passing a component as a prop to the styled component. In the styled component, I write a function that takes out the component prop (containing my component) and returns it. I expect it to use this component to apply the styled component to.

Actual Behavior

Nothing is being applied to the passed component.

[probablyup]

The styles are generated as a className which needs to be used in the custom ico component. You could modify your thing like this I think:

const Icon = styled(
    ({ component, ...props }) => React.cloneElement(component, props)
)`
  background: red;
`

[anthonator]

@kitten can you elaborate on or point me to some documentation explaining why dynamic render components are not recommended? Is it the same issue with using styled in render?