如何解决样式化的组件选择上一个同级
我正在构建一个表单,并且尝试在输入集中后更改标签的颜色。 我正在使用样式化的组件参考api,如果我将标记作为输入后跟标签,则可以看到它起作用,但我的情况并非如此。 我的标记是
<FieldWrapper>
<StyledLabel htmlFor={id && id}>{label}</StyledLabel>
<StyledInput
type={type}
id={id && id}
autoComplete={autoComplete}
{...rest}
/>
</FieldWrapper>
我样式化的组件文件如下:
const FieldWrapper = styled.div`
display: flex;
flex-wrap: wrap;
width: 100%;
position:relative;
& ${StyledInput}:focus + ${StyledLabel} {
color: red;
}
`;
有没有一种方法可以不必更改标记的顺序?从标记的角度看,在标签之前有输入是不符合直觉的。
谢谢。
解决方法
首先,您需要在标签前放置输入。您可以使用flex-direction:row-reverse;在输入之前显示标签。然后,请勿使用引用变量$ {StyledLabel},而仅使用输入和标签,如本例所示:
<FieldWrapper>
<StyledInput
type={type}
id={id && id}
autoComplete={autoComplete}
{...rest}
/>
<StyledLabel htmlFor={id && id}>{label}</StyledLabel>
</FieldWrapper>
,然后输入样式:
const FieldWrapper = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
width: 100%;
position:relative;
input:focus ~ label{
color: green;
}
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。