时间戳

首页 > 解决方案 > 对其他样式组件的引用不起作用

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

问题描述

为什么在这种情况下${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;
}

标签： cssreactjsstyled-components

解决方案

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

推荐阅读