CODEWITHSUNDEEP
cssreactjsvalidationformikyup
jsnoobie
jsnoobie

Reputation: 115

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

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?

Upvotes: 2

Views: 8578

Answers (4)

Jean Vidal
Jean Vidal

Reputation: 1

You can use:

/* RowWrapper and InputMask are components */

<RowWrapper className='hideDesk'>
   <InputMask 
      inputMask={masks.card}
      inputMode="numeric"
      guide={false}
      id="ccNumber"
      onFocus={focusChange}
      name="number"
      value={data.number}
      placeholder=""
      onChange={onChange}
    />
</RowWrapper>

/* Component Style */

export const RowWrapper = styled.div`
  span {
      font-size: 13px;
      margin-top: 5px;
      color: #fff;
      background-color: red
    }

/* Styled.div is a component, you can create that using like .div or .p whatever, is not important and depends on project, I'm explaining to make the code understand better */

Upvotes: 0

Don Koscheka
Don Koscheka

Reputation: 21

The solution is clever but misleading. Changing the class name to reflect what it is you are styling would be a lot clearer. May I suggest:

<div class="error">{errors.email}</div>

Also, if you are using Formik, this works:

<div class='error'>
    <ErrorMessage name="details" />
</div>

And the CSS:

.error {
  font-size: 12px;
  color: var(--red-600);
   margin-top: 0.25rem;
 }

Note: I prefer divs when the primary purpose of the tag is to style the contents, but that is a matter of personal preference.

Upvotes: 2

antonioc_cl
antonioc_cl

Reputation: 319

I would add that you need to modify class to className

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

Upvotes: 0

jsnoobie
jsnoobie

Reputation: 115

Oops nevermind, I got it...embarassingly.

You can style the error messages directly in the form: 

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

My bad!

Upvotes: 4

Related Questions