React-Hook-Form 样式化多个错误消息

Question

请问是否可以为 react-hook-form 分别设置两条错误消息的样式？

      <input
        type="text"
        placeholder="Email"
        name="email"
        {...register("email", {
          required: "Email is required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
            message: "Email is invalid"
          }
        })}
      />
      <ErrorMessage
      errors={errors}
      name="email"
      render={({ message }) => <p className="Emailerrormsg"><ErrorIcon className='Emailerror'/> {message} </p>}
     />

在我上面的代码中，如果输入字段不符合模式，我会收到 required 的错误消息和另一条消息。我可以知道如何以不同的方式设置这些消息的样式吗？

Answer 1

您必须自己处理错误消息逻辑。

这是一个例子：https://codesandbox.io/s/strange-matsumoto-tl25o

您可以通过检查错误消息类型来更新样式

React-Hook-Form 样式化多个错误消息

React-Hook-Form Styling Multiple Error Messages

forms

error-handling

reactjs

react-hooks

react-hook-form