css - Tag <ErrorMessage> Formik react Style

Question

I would like to apply the style to Formik's tag for react. How can I do?

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

I try with component={Custom} but don't work.

I use Tailwindcss.

Thanks if you want to help me.

Answer 1

To 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 styling thus:

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

Answer 2

This method worked for me in react..

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

then, call that className in the CSS file

.error{
  color: red;
}