Как изменить ввод даты реакции css

Question

Я использую даты реакции , но я не могу найти способ изменить css поля ввода.
Например, border, background цвет эт c. поскольку обычный css не работает с датами реагирования .

<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

Вы можете создать собственный файл стиля и импортировать его, а не импортировать связанный стиль, поставляемый с пакетом. Вот так:

// 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;
}

Подробнее смотрите здесь здесь .

Answer 2

можно создать компонент для инкапсуляции стилей и подключения библиотек styled-system и grid-style *

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

и

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

Answer 3

Вы можете переопределить определенные c классы.

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

См. Документ