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

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;
}`