如何在 React Formik 应用程序中设置 Yup 验证的错误消息样式？答案

【问题标题】：How to style error messages validated by Yup in a React Formik app?如何在 React Formik 应用程序中设置 Yup 验证的错误消息样式？
【发布时间】：2019-04-17 03:56:51
【问题描述】：

我正在使用 Formik 和 Yup 在 React 中构建一个表单。我不确定如何为电子邮件和密码字段显示的动态错误消息设置样式。下面是一个代码示例：

https://codesandbox.io/s/j3l5w70q9w

我想对背景颜色、位置和文本颜色进行风格化，但我不知道如何在出现的错误文本中插入自定义类名。

有什么想法吗？

【问题讨论】：

标签： css reactjs validation formik yup

【解决方案1】：

哎呀没关系，我明白了...尴尬。

您可以直接在表单中设置错误消息的样式：

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

我的错！

【讨论】：

【解决方案2】：

我要补充一点，您需要将class 修改为className

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

【讨论】：

【解决方案3】：

解决方案很聪明，但具有误导性。更改类名以反映您的样式会更加清晰。我可以建议：

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

另外，如果您使用的是 Formik，这也可以：

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

还有 CSS：

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

注意：当标签的主要目的是设置内容样式时，我更喜欢 div，但这是个人喜好问题。

【讨论】：