标签<ErrorMessage> Formik反应样式

Question

我想将样式应用于Formik的标签以做出反应。我该怎么办？

<ErrorMessage name="email"></ErrorMessage>

我尝试使用component = {Custom}，但不起作用。

我使用Tailwindcss。

谢谢您的帮助。

Answer 1

要add a class使用React组件，请使用className="theClass"。 Formik的ErrorMessage.component属性采用自定义组件的值，例如component={Custom}，也可以使用HTML容器，例如component="div"。假设这不是React的Tailwind端口，则使用“ div”是合适的。将这两者放在一起，就可以应用Tailwind-style invalid message样式：

<ErrorMessage name="emailAddress" component="div" className="text-red-500 text-xs italic" />

Answer 2

这个方法在我的反应中对我有用..

<ErrorMessage name='email' render={msg => <div className="error">{msg}</div>}/>

然后，在 CSS 文件中调用那个 className

.error{
  color: red;
}