How to style an element on focus using styled components?

Here is my styled component: const StyledInput = styled.input` width: 90%; padding: grey; border: 0px; font-size: 12px; &:input:focus { outline: none; box-shadow: 0px 0px 2px red; } `; And the implementation: <StyledInput autoFocus={true} type=”text” onChange={this.handleChange} placeholder={this.props.placeHolder} /> But the borders are not changing to red when focused (keep the default Chrome blue). How can I…

Details