标签 <ErrorMessage> Formik react Style答案

【问题标题】：Tag <ErrorMessage> Formik react Style标签 <ErrorMessage> Formik react Style
【发布时间】：2020-03-16 09:36:26
【问题描述】：

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

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

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

我使用 Tailwindcss。

如果你想帮助我，谢谢。

【问题讨论】：

你试过只使用style 道具吗？
不...我尝试使用样式道具。谢谢

标签： css reactjs styles formik

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

【讨论】：

谢谢 - 添加 div 时效果很好。

【解决方案2】：

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

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

然后，在 CSS 文件中调用该 className

.error{
  color: red;
}

【讨论】：

只要确保 .error 没有像 bootsrap 或任何其他 CSS 框架那样保留