Как стилизовать элемент <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;
    }
`;

Как отметил Ишервуд:

вы по существу удваиваете входную часть селектора, когда вы имейте это сейчас.