Dynamic styled(component) by passing component as prop

[samueldepooter]

Issue details

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 but instead it does not apply anything.

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;
`

2. Use the styled component in your render & pass it a 'component' prop.

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

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

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react ^3.2.18
• @storybook/addon-actions ^3.2.18
• @storybook/addon-knobs ^3.2.18
• @storybook/addon-links ^3.2.18
• @storybook/addons ^3.2.18

Affected platforms

Not relevant.

Screenshots / Screencast / Code Snippets (Optional)

[samueldepooter]

Wrong repo... 😅