Reactjs 样式化组件:Can';t更改焦点操作上的父组件
我有这个HTML结构:Reactjs 样式化组件:Can';t更改焦点操作上的父组件,reactjs,styled-components,Reactjs,Styled Components,我有这个HTML结构: <SearchBarContainer> <i class="fa fa-search" aria-hidden="true" style={{ marginRight: "5px" }} /> <SearchBarText>What</SearchBarText> <SearchBar type="text" name=
<SearchBarContainer>
<i class="fa fa-search" aria-hidden="true" style={{ marginRight: "5px" }} />
<SearchBarText>What</SearchBarText>
<SearchBar type="text" name="" />
<SearchBarRightIcon>
<FaCity />
</SearchBarRightIcon>
</SearchBarContainer>
如您所见,我有&:focus
属性,它只更改元素本身的背景,但它不适用于searchbarrightcon
,也不适用于SearchBarContainer
。发生了什么?我已经制作了很多活动和悬停属性,它们改变了父元素,但是这是我第一次处理焦点,怎么了?触发focus
操作时,如何更改SearchBarContainer
和SearchBarRightIcon
export const SearchBarContainer = styled.div`
height: 10px;
background-color: #fff;
border-radius: 0.5rem;
display: flex;
align-items: center;
padding: 20px;
margin-left: 10px;
padding: .75rem 1rem;
font-family: 'Roboto',sans-serif;
border: 1px solid #949494 !important;
`;
export const SearchBarRightIcon = styled.div`
display:block;
color: red;
padding-left: 10px;
`;
export const SearchBar = styled.input`
flex: 1;
border: none;
outline: none;
font-size: 18px;
padding-left: 10px;
height: 21px;
&:focus{
background: pink;
// Let's remove the icon which is in the righ
${SearchBarContainer} {
background: blue !important;
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}
${SearchBarRightIcon} {
display: none;
}
}
`;