Блог

Я использую styled-components и пытаюсь изменить высоту Top «до 300px «, когда фокусируюсь на своем Input .

Я пробовал что-то подобное, но не получилось:

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

Структура Dom:

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

Мой код:

 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;   amp;:focus ${Top} {  height: 500px;  } `;  

Как я могу изменить реквизит других компонентов с помощью стилизованных компонентов?

Использовать ~ селектор:

 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;   amp;:focus ~ ${Top} {  height: 500px;  } `;  

Какова ваша структура dom?