react-final-form-html5-validation 的自定义验证错误样式

如何解决react-final-form-html5-validation 的自定义验证错误样式

除了 react-final-form-html5-validation 之外，我还想使用 react-final-form 库，因为它减少了代码样板的数量。但我想为无效输入创建自定义 CSS 样式，而不是浏览器验证错误。

这是我的代码：

  const onSubmit = () => {};
  return (
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit,Meta,invalid }) => (
        <form onSubmit={handleSubmit}>
          <Field
            required
            name="firstName"
            type="firstName"
            component="input"
            className="form-control mb-3"
            placeholder="firstName"
          />

          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </form>
      )}
    />