Css 如何设置formik错误字段的边框样式？

我知道如何使用常规的表单输入/选择/等等来设置样式，但是我已经从使用它们切换到了Formik字段，上面的工作方式不同

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

{
常量错误={}；
如果（！values.example）errors.example='Required'；
返回错误；
}}
onSubmit={this.handleSubmit}
render={formProps=>{
返回(
)
}} />

那么，如果在提交时输入为空，我将如何将输入的边框从正常状态更改为红色？

解决方案

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

您可以为

Formik

提供的

字段

和

ErrorMessage

组件设置样式，就像您为react中的任何其他组件设置样式一样。我在这里为您创建了一个工作演示：

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

看一看。继续阅读以获得解释

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

解释 最简单的方法是使用

style

prop:

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

函数getStyles（错误，字段名）{
if（getIn（错误，字段名））{
返回{
边框：“1px纯红”
}
}
}
...
...

但是，如果您需要可管理的自定义设置，我建议您创建一个自定义组件<代码>字段为您提供了一个

组件

道具，您可以将自己的自定义组件分配给它，例如

CustomInput

或类似的东西：

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

函数getStyles（错误、字段名）{
if（getIn（错误，字段名））{
返回{
边框：“1px纯红”
}
}
}
函数CustomInput（{field，form:{errors}}）{
返回
}
...
...

当我尝试

错误消息的公认答案中建议的技术时，使用

<ErrorMessage name="propertyName" style={{ color: 'red'}}/>

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>



这对我不起作用。不过，当我把它装进另一个容器时，它起了作用

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>



希望这对其他人有所帮助。
仅供参考，下面给出了用于设置错误字段（如边框）样式的解决方法：

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>


<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

非常令人惊讶的是，Formik没有提供这种开箱即用的功能，您必须用自定义代码扩展

<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>

但一般来说，您不应该使用Formik自己的
组件。相反，您应该将Formik连接到一个组件库，如Material UI或React Bootstrap，它公开其组件上的
isInvalid={..}
或
error={..}
道具。这将允许您正确设置控件的样式。下面是一个如何将Formik连接到React Bootstrap的示例：如果您在控件中键入，您将看到它的样式如何随错误而变化。
当我使用
尝试您的
ErrorMessage
组件技术时，它不起作用。有什么想法吗？
组件还支持
组件
和
渲染
道具。因此，您可以执行类似于
{message}/>
的操作。这样，如果需要类似的内容，您可以根据消息类型设置错误样式。这会在输入过程中出现错误时立即应用样式，但我相信错误消息会显示在模糊上，因此它们不同步。此解决方案存在问题。如果您将一个字段留空，则两个字段都会显示红色边框，就像您同时触摸了两个字段一样。
<div style={{ color: 'red'}}>
     <ErrorMessage name="propertyName" />
</div>