如何使用 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)
标题组件根据 React / Gatsby / Styled-components 中的背景更改文本颜色
如何使用 Typescript 和 styled-components 创建 ref
如何使用v4版本styled-components的全局样式?
Styled-components vs Emotion - 如何在 Styled-components 上重新应用 css`style` 函数