How to change react-dates input border color?

Question

How can I change react-dates input border color depending on a component state?

I want to set the input border to red when there is an error on my form and the normal color when everything is ok.

I'm looking for this but I can't find it.

I'm in version 20.2.0

Edit:

I want to do something like this

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

But I can't do that because react-dates don't provide a styles or className prop. Also, overriding the css don't work, because I need to togle the style, not just change it once.

Answer 1

Override the CSS:

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

Use a div around the component with a validation state:

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