使用样式化的组件对输入进行聚焦时更改标签的位置

Question

我是使用样式组件的新手，我一直在尝试使用Google物料设计标准创建输入，但是我无法重新创建使输入聚焦时使标签移动的动画。

"radix": "off"

所以在简历中，我希望标签向上移动20px，在标签聚焦时更改其字体大小和颜色，我不确定我的方法是否正确，或者只是实施一个在这种情况下是普通的CSS类。

Answer 1

您缺少~符号来将标签元素定位在输入焦点上

const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  ${Input}:focus ~ & {
    top:-18px;
    font-size:14px;
    color:#5264AE;
  }
`;

Working demo