如何使用样式化的组件为焦点上的<input>元素设置样式？

Question

这是我设计的样式：

const StyledInput = styled.input`
    width: 90%;
    padding: grey;
    border: 0px;
    font-size: 12px;
    &:input:focus {
        outline: none;
        box-shadow: 0px 0px 2px red;
    }
`;

执行：

 <StyledInput
     autoFocus={true}
     type="text"
     onChange={this.handleChange}
     placeholder={this.props.placeHolder}
 />

但是聚焦时边框不会变为红色（保持默认的Chrome为蓝色）。如何更改焦点上的输入边框？