标签 <ErrorMessage> Formik react 样式

Question

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

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

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

我用的是 Tailwindcss。

如果你愿意帮助我，谢谢。

Answer 1

add a class to a React component, use className="theClass". Formik's ErrorMessage.component property takes a value of a custom component, e.g. component={Custom} as you have, or it can take an HTML container, e.g. component="div". Assuming this is not a Tailwind port to React, "div" is appropriate. Putting these two together, you can apply 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 文件中调用该类名

.error{
  color: red;
}

Answer 3

<ErrorMessage name="field name" component="div" className="some classes" />

为 ErrorMessage 组件添加“组件”字段

标签 <ErrorMessage> Formik react 样式

Tag <ErrorMessage> Formik react Style

css

styles

reactjs

formik