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

Posted 2023-03-05

【中文标题】如何使用 styled-components 更改其他组件的属性？

【英文标题】：How to change other components' property with 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"
            
            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？

【参考方案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 的焦点事件。