对其他样式组件的引用不起作用

Question

为什么在这种情况下${InputBox}:focus & {... }在styled-components中不起作用？ 还有其他方法可以使这项工作吗？

export const InputBox = styled.input`
position: absolute;
border: none;
border-bottom: 1px solid black;
background: transparent;
&:focus {
    outline: none;
    border-bottom: 1px solid blue;
}

export const Placeholder = styled.div`
margin-top: 0px;
${InputBox}:focus & {
    margin-top: 50px;
    color: white;
}

Answer 1

由于您的InputBox呈现为 html 元素，因此您需要通过元素名称或 className 来定位它以覆盖样式。

export const InputBox = styled.input`
position: absolute;
border: none;
border-bottom: 1px solid black;
background: transparent;
&:focus {
    outline: none;
    border-bottom: 1px solid blue;
}`

export const Placeholder = styled.div`
margin-top: 0px;
input:focus & {
    margin-top: 50px;
    color: white;
}`