Estoy usando styled-components y estoy tratando de cambiar la altura de Top a 300px cuando me enfoco en mi Input .

Intenté algo como esto pero no funcionó:

 &:focus ${Top} { height: 500px; }

Estructura del edificio:

 <Top> <Avatar src="./assets/person/1.jpeg" alt="" sx={{ width: "50px", height: "50px" }} /> <Input placeholder="What's in your mind?" /> </Top>

Mi código:

 export const Top = styled.div` display: flex; align-items: flex-start; height: 150px; `; export const Input = styled.textarea` flex: 1; height: 100%; resize: none; border: none; outline: none; font-size: 16px; padding: 10px; &:focus ${Top} { height: 500px; } `;

¿Cómo cambio el accesorio de otros componentes con componentes con estilo?