Refs - Styled Components

Refs | v4

Passing a ref prop to a styled component will give you one of two things depending on the styled target:

the underlying DOM node (if targeting a basic element, e.g. styled.div)
a React component instance (if targeting a custom component e.g. extended from React.Component)

react

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

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <Input
        ref={this.inputRef}
        placeholder="Hover to focus!"
        onMouseEnter={() => {
          this.inputRef.current.focus()
        }}
      />
    );
  }
}

render(
  <Form />
);

Using an older version of styled-components (below 4.0.0) or of React? Use the innerRef prop instead.