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

Question

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

https://codesandbox.io/s/j3l5w70q9w

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

有任何想法吗？

Answer 1

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

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

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

我的错！

Answer 2

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

<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，但这是个人喜好问题。

Answer 3

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

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

Answer 4

您可以使用：

/* RowWrapper 和 InputMask 是组件 */

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

/* 组件样式 */

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

/* Styled.div 是一个组件，您可以使用 .div 或 .p 之类的方式创建它，这并不重要并且取决于项目，我正在解释以使代码更好地理解 */