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

Question

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

当我的表单上有错误和正常颜色时，我想将输入边框设置为红色。

我正在寻找这个，但找不到。

我在版本20.2.0

中

编辑：

我想做这样的事情

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

但我不能这样做，因为react-dates不提供styles或className Prop。另外，覆盖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类，以使边界更改错误/NO-INTUP。

可能与react＆amp;react-datepicker＆amp;formic Packager版本(下面列出(。

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

CSS Override

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

组件覆盖

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