使用样式化组件聚焦输入时更改标签的位置答案

【问题标题】：Changing the position of a label when the input is focused using styled components使用样式化组件聚焦输入时更改标签的位置
【发布时间】：2019-11-15 17:32:34
【问题描述】：

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

const Input = styled.input`
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
  }
`;
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:-20px;
  font-size:14px;
  color:#5264AE;
  }
`;

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

【问题讨论】：

标签： reactjs styled-components

【解决方案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

【讨论】：