:after자식이 포커스를받을 때마다 부모 구성 요소의 선택기 속성을 수정 하고 싶습니다 . 이것은 처음에는 꽤 쉬운 것처럼 보였지만 어떤 이유로 작동하도록 할 수 없습니다. 내 구성 요소 트리는 다음과 같습니다.
구성 요소 트리 :
<Wrapper>
<Input type='text'/>
</Wrapper>
정의 :
const Wrapper = styled.div`
&:after {
display: block;
content: "";
border-bottom: solid 3px black;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
`
const Input = styled.input`
border: none;
width: 90%;
transform-origin: center;
display: inline-block;
:focus {
outline: none;
border-bottom: 1px solid black;
}
&:focus ${Wrapper}:after {
transform: scaleX(1);
}
`
나는 border-bottom아이가 초점을 맞출 때마다 부모가 a를 표시 하고 아이가 초점 border-bottom이 맞지 않을 때마다 사라지 기를 원합니다 . 이것을 달성하는 방법에 대한 아이디어가 있습니까? 내가 무엇을 놓치고 있거나 잘못하고 있습니까?
모든 도움을 주시면 감사하겠습니다.
스타일로만이 작업을 수행 할 수 없습니다. 하지만 좋은 생각이 있습니다.
다음과 같이 입력 포커스 상태를 저장할 수 있습니다.
const [isFocused,setIsFocused] = useState(false);
<Input onFocus={()=>{setIsFocused(true)}} onBlur={()=>{setIsFocused(false)}} />
isFocused래퍼에 전달 하십시오.
<Wrapper focused={isFocused} >
이제 isFocused스타일에서 사용할 수 있습니다 .
const Wrapper = styled.div`
border-bottom:${props=>props.focused&&"1px solid black"};
`;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다