innerRef example on documentation with styled()

I am trying the following code on the documentation

https://www.styled-components.com/docs/advanced#refs

const Input = styled.input`
	padding: 0.5em;
	margin: 0.5em;
	color: palevioletred;
	background: papayawhip;
	border: none;
	border-radius: 3px;
`;

class Toto extends React.Component {
	render() {
		return (
			<input {...this.props} />
		);
	}
}

const Input2 = styled(Toto)`
	padding: 0.5em;
	margin: 0.5em;
	color: palevioletred;
	background: red;
	border: none;
	border-radius: 3px;
`;

const Form = () => (
	<Input
		placeholder="Hover here..."
		innerRef={x => this.input = x}
		onMouseEnter={() => this.input.focus()}
	/>
);

const Form2 = () => {
	<Input2	placeholder="Hover here..."
		innerRef={x => this.input2 = x}
		onMouseEnter={() => this.input2.focus()}
	/>
}

render(
	<div>
		<Form />
		<Form2 />		
  	</div>
);

I would like to see a working demo of the innerRef using my demo. I wasn’t able to produce it due to JS errors :

 VM802:29 Uncaught TypeError: Cannot read property 'focus' of null

This seems to happen when I edit too much the javascript in the page.

Could it possible to see both example working ?

[joetidee]

I am having a similar issue. I have a Button styled component:

<Button innerRef={(elem) => this.btn = elem} />

but I am getting null returned when doing this:

console.log(this.btn);

If I use ‘ref’ instead of ‘innerRef’, then I get the StyledComponent object back. Are you able to advise?

Gist: https://gist.github.com/joetidee/5316feb0a39b52bf9b48399888258781

[janv]

@joetidee See https://github.com/jxnblk/styled-system/pull/188