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

【问题标题】：How to style an <input> element on focus using styled components?如何使用样式化组件为 <input> 元素设置焦点样式？
【发布时间】：2020-04-25 00:34:23
【问题描述】：

这是我的样式化组件：

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 蓝色）。如何更改焦点上的输入边框？

【问题讨论】：

标签： html css styled-components

【解决方案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;
    }
`;

正如伊舍伍德指出的那样：

您实际上是在将选择器的输入部分加倍，就像现在一样。

【讨论】：