在使用React-hook-form进行验证的情况下，标签转换不起作用

问题描述

我正在尝试应用一种样式，当输入焦点对准时将标签移动到顶部。 在尝试添加验证之前，它运行良好。 示例代码：-

 <form onSubmit={handleSubmit(onSubmit)}>
    <div className="form__group">
      <input
        className="form__input"
        type="text"
        id="name"
        name="name"
        placeholder=" "
        ref={register}
      />
      {errors.name && <p className="error">{errors.name.message}</p>}
      <label className="form__label" htmlFor="name">
        Name
      </label>
    </div>
    <input type="submit" />
  </form>

• 通常，如果您专注于“输入”，则过渡将从一开始就起作用。的 当不满足任何验证要求时，就会出现问题 提交并显示错误。
• 如果在提交表单时不满足验证要求，则会出现错误消息 根据验证被触发，但在这种情况下，转换为 即使输入重点突出，也不会应用。
• 只要错误可见，就不会应用样式 不明白为什么。到目前为止，我已经推断出它已经超越了 标签的样式。我似乎找不到办法。

提到的样式是：-

    .form__label {
    position: absolute;
    color: #777777;
    transition: all 0.3s;
    cursor: text;
    top: 16%;
    left: 6.5%;
  }
  
  form__input {
    &:focus {
      border: 2px solid blue;
      & + .form__label {
        top: 3px;
        left: 10px;
        color: blue;
      }
    }
    
    &:not(:placeholder-shown) + .form__label {
      top: 3px;
      left: 10px;
      color: blue;
    
    }
  }

上述问题的沙箱是here

解决方法

问题是在上述情况下选择直接同级而不是“ +”组合器，应该使用“〜”组合器。

• “ +”组合器选择直接同级，在没有错误的情况下为标签。因此它从一开始就可以使用，但在其他情况下则无法使用。
• “〜”组合器选择在所有情况下均适用的常规同级。

如果出现错误，标签不是导致问题的直接兄弟姐妹。