Reactjs 我可以将材料界面中的排版添加到Formik和Yup中的匹配项吗

我有以下代码：

validationSchema: Yup.object({
 email: Yup.string()
    .min(8, <Typography color = "error">Must be at least 8 characters</Typography>)
    .max(20, <Typography color = "error">Must be less than 20 characters</Typography>)
    .required(<Typography color = "error">Email is required</Typography>)
    .email(<Typography color = "error">Must have email format.</Typography>),
  firstname: Yup.string()
    .min(3, <Typography color = "error">Must be at least 3 characters</Typography>)
    .max(20, <Typography color = "error">Must be less than 20 characters</Typography>)
    .required(<Typography color = "error">Email is required</Typography>)
    .matches(/^[a-zA-Z0-9]+$/, <Typography color = "error">Cannot contain special characters or spaces</Typography>),
}),

validationSchema:Yup.object({
电子邮件：Yup.string（）
.min（8，必须至少包含8个字符）
.max（20，必须少于20个字符）
。必填项（需要电子邮件）
.电子邮件（必须具有电子邮件格式），
名字：Yup.string（）
.min（3，必须至少包含3个字符）
.max（20，必须少于20个字符）
。必填项（需要电子邮件）
.匹配项（/^[a-zA-Z0-9]+$/，不能包含特殊字符或空格），
}),

---

“.min”、“.max”和“.required”工作正常，但“.matches”中的错误消息未显示。甚至可以在“.matches”中使用排版吗？

我不认为模式是用来容纳组件的。您应该只传递错误字符串，然后在react组件中呈现帮助文本。