如何使用styled-components修改其他关联组件的样式属性？

你的写法试图从子组件Input的聚焦状态选中父组件Top，但原生CSS不支持直接选中父元素，因此这段样式不会生效。

方案1：使用:focus-within伪类（推荐，实现最简单） #

:focus-within伪类会在元素自身或其内部任意子元素聚焦时触发，你只需要把样式逻辑移到父组件Top中即可，修改后的代码如下：

export const Top = styled.div`
  display: flex;
  align-items: flex-start;
  height: 150px;
  /* 新增如下样式 */
  &:focus-within {
    height: 300px;
  }
`;

export const Input = styled.textarea`
  flex: 1;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 10px;
  /* 删除原来的 &:focus ${Top} 相关的错误样式 */
`;

该方案兼容所有现代浏览器，仅需要兼容IE浏览器时才需要用第二种方案。

方案2：通过React状态动态控制 #

如果需要兼容低版本浏览器，可以通过状态绑定的方式实现：

1. 在父组件中声明聚焦状态，给Input绑定聚焦/失焦事件修改状态，把状态传给Top组件：

import { useState } from 'react';

const YourComponent = () => {
  const [isInputFocused, setIsInputFocused] = useState(false);
  return (
    <Top isFocused={isInputFocused}>
      <Avatar
        src="./assets/person/1.jpeg"
        alt=""
        sx={{ width: "50px", height: "50px" }}
      />
      <Input 
        placeholder="What's in your mind?"
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
    </Top>
  )
}

2. 修改Top的样式，接收props动态判断高度：

export const Top = styled.div`
  display: flex;
  align-items: flex-start;
  height: ${props => props.isFocused ? '300px' : '150px'};
`;

内容的提问来源于stack exchange，提问作者jethro-dev