How to change react-dates input css

Question

I am using react-dates but I can't find any way of changing the css of the input field.
eg border, background color etc. since the regular css doesn't work with react-dates .

<SingleDatePicker
    date={this.state.dateOfPurchase} 
    onDateChange={date => {
        this.setState({ dateOfPurchase: date })


    }} 
    focused={this.state.focused} 
    onFocusChange={({ focused }) => this.setState({ focused })}
    id="your_unique_id" 
    isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
    numberOfMonths= "1"    
/>

Answer 1

You can create a custom styling file and import that one rather than importing the bundled styling coming with the package. Like this:

// NOTE: the order of these styles DO matter

// Will edit everything selected including everything between a range of dates
.CalendarDay__selected_span {
  background: #82e0aa; //background
  color: white; //text
  border: 1px solid $light-red; //default styles include a border
}

// Will edit selected date or the endpoints of a range of dates
.CalendarDay__selected {
  background: $dark-red;
  color: white;
}

// Will edit when hovered over. _span style also has this property
.CalendarDay__selected:hover {
  background: orange;
  color: white;
}

// Will edit when the second date (end date) in a range of dates
// is not yet selected. Edits the dates between your mouse and said date
.CalendarDay__hovered_span:hover,
.CalendarDay__hovered_span {
  background: brown;
}

For more look the docs here .

Answer 2

You can override specific classes.

.CalendarDay__selected_span {
  background: #82e0aa; //background
  color: white; //text
  border: 1px solid $light-red; //default styles include a border
}

See document

Answer 3

it is possible to create a component for encapsulating styles and connecting libraries styled-system and grid-styled

import {Box} from 'grid-styled'
import {themeGet} from 'styled-system'

and

const StyledWrapp = Box.extend`
    .DateRangePickerInput {
        border-radius: 4px;
   `;