How to style error messages validated by Yup in a React Formik app?

1
votes

I'm building a form in React using Formik and Yup. I'm not sure on how to style the dynamic error messages that appear for the email and password fields. Below is a code sample:

https://codesandbox.io/s/j3l5w70q9w

enter image description here

I want to stylize the background colors, position and text colors but I don't know how to insert a custom class name into the error text that appears.

Any ideas?

2
cssreactjsvalidationformikyup

2 Answers

4
votes

Oops nevermind, I got it...embarassingly.

You can style the error messages directly in the form: 

   <p class="styles">{errors.email}</p>

My bad!

0
votes

I would add that you need to modify class to className

<p className="styles">{errors.email}</p>