innerRef doesnt register if you dynamically create the element

Version

2

Reproduction

const DynamicComponent = styled(({ children, tag, ...props }) => {
    return React.createElement(tag, props, children);
})`
// Some css
`;

// Usage
<DynamicComponent tag='div' innerRef={ref => this.someRef = ref} />

Steps to reproduce

Use React.createElement to return an element to styled and try to use innerRef

Expected Behavior

innerRef should be assigned to the returned React element

Actual Behavior

ref is null

[cusxio]

@cjthedizzy, @philpl

Since this pattern is fairly common in styled-components, is there any work around to get the “ref” of the component?

[kitten]

There’s a couple of things here actually:

• I’m not sure which version you’re using. Are you on v2.0.0-15?
• innerRef is turned into ref for targets that aren’t styled components. Since you’re passing in an anonymous functional component, the ref will point to it
• The problem however is that refs to functional components are not supported in React

I hope this helps you resolve this 😃

You can actually also look at our tests here, if it’s still unclear: https://github.com/styled-components/styled-components/blob/739e1a003cfd51f0dc07a64c01de0d8d93a3c945/src/test/basic.test.js#L61