如何使用 styled-components 更改其他组件的属性？答案

【问题标题】：How to change other components' property with styled-components?如何使用 styled-components 更改其他组件的属性？
【发布时间】：2022-01-07 17:06:01
【问题描述】：

我正在使用styled-components，当我专注于Input 时，我正在尝试将Top 的高度更改为300px。

我尝试过类似的方法但没有工作：

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

Dom 结构：

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

我的代码：

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

如何使用 styled-components 更改其他组件的 prop？

【问题讨论】：

标签： javascript html css reactjs styled-components

【解决方案1】：

使用~ 选择器：

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

你的 dom 结构是什么？

【讨论】：

它不工作。我更新了 dom 结构的帖子。
呃，dom结构貌似不能用css实现。您需要使用 JavaScript 的焦点事件。