如何更改反应日期输入边框的颜色？

Question

如何根据组件状态更改react-dates输入边框的颜色？

我要在表单出现错误时将输入边框设置为红色，而在一切正常时将输入边框设置为正常颜色。

我正在寻找它，但找不到。

我的版本为20.2.0

编辑：

我想做这样的事情

<SingleDatePicker
    {...otherProps}
    styles={{border: '1px solid red'}}
/>

但是我不能这样做，因为react-dates不提供styles或className道具。另外，覆盖CSS无效，因为我需要切换样式，而不仅仅是更改一次。

Answer 1

覆盖CSS：

.error .SingleDatePicker .DateInput_input {
  border: 1px solid #bf2155;
}

在具有验证状态的组件周围使用div：

<div className={this.props.value ? null : 'error'}>
  <SingleDatePicker/>
</div>

Answer 2

添加到Nate的答案中，

我确实需要更改与@nate声明的类别不同的​​react-datepicker类，以使边界在错误/无输入时发生变化。

可能与react和react-datepicker和formic打包程序版本（下面列出）有关。

"react": "^17.0.1",
"react-datepicker": "^3.3.0",
"react-dom": "^17.0.1",
"react-formik-ui": "^5.0.2",

CSS覆盖

.picker-error .react-datepicker__input-container input {
    border: 1px solid red;
  }

组件替代

<div className={props.errors.startDate && props.touched.startDate ? 'picker-error' : null}>
<DatePicker
 ....
 ....
>
</div>