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

Posted

技术标签:

【中文标题】如何使用 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 的焦点事件。

以上是关于如何使用 styled-components 更改其他组件的属性?的主要内容,如果未能解决你的问题,请参考以下文章

使用 Styled-components 修改 SVG (react / next)

styled-components:扩展样式并更改元素类型

标题组件根据 React / Gatsby / Styled-components 中的背景更改文本颜色

如何使用 Typescript 和 styled-components 创建 ref

如何使用v4版本styled-components的全局样式?

Styled-components vs Emotion - 如何在 Styled-components 上重新应用 css`style` 函数