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.
e.g. 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"    
/>

Muhammad Zeeshan · Accepted Answer · 2020-02-14 10:04:50Z

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.

Alok Mali · Accepted Answer · 2020-02-14 10:09:45Z

0

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

answered Feb 14, 2020 at 10:09

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

Comments

Lana Svetly · Accepted Answer · 2020-02-14 10:19:09Z

0

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;
   `;

answered Feb 14, 2020 at 10:19

Lana Svetly

238 bronze badges

Collectives™ on Stack Overflow

How to change react-dates input css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related