如何使用带样式的组件在焦点上设置 <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 蓝色）。如何更改焦点上的输入边框？

Answer 1

将&:input:focus {改为&:focus {:

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

正如 isherwood 指出的那样：

you're essentially doubling up on the input portion of your selector as you have it now.

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

How to style an <input> element on focus using styled components?

html

css

styled-components