reactjs - 如何更改 react-dates 输入边框颜色？

Question

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

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

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

我在版本20.2.0

编辑：

我想做这样的事情

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

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

score 2 · Accepted Answer

覆盖 CSS：

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

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

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

score 0 · Accepted Answer

添加到内特的回答中，

我确实需要更改与react-datepicker@nate 所述不同的类，以便在错误/无输入时更改边框。

可能与react& react-datepicker& formicpackager 版本（如下所列）有关。

"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>