CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
prismo
prismo

Reputation: 1899

StyledComponents: Referencing another component

I want my parent component's :after selector's properties modified whenever the child is focused. This seemed pretty easy at the get go but for some reason, I can't get it to work. My component tree looks something like this:

Component Tree:

<Wrapper>
 <Input type='text'/>
</Wrapper>

Definitions:

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);
  }
`

I want my parent to display a border-bottom whenever the child is focused and the border-bottom to disappear whenever the child is not in focus. Any ideas as how I can achieve this? What am I missing/doing wrong?

All help is appreciated.

Upvotes: 0

Views: 56

Answers (1)

mortezashojaei
mortezashojaei

Reputation: 452

you cant do this only with styles . but i have a good idea.

you can save your input focus state like this :

  const [isFocused,setIsFocused] = useState(false);


  <Input onFocus={()=>{setIsFocused(true)}} onBlur={()=>{setIsFocused(false)}} />

and pass isFocused to your wrapper :

<Wrapper focused={isFocused} >

now you can use isFocused in your styles :

const Wrapper = styled.div`
   border-bottom:${props=>props.focused&&"1px solid black"};
`;

Upvotes: 1

Related Questions