css - 如何更改 react-dates 输入 css

Question

我正在使用react-dates但我找不到任何更改输入字段 css 的方法。
例如边框、背景颜色等，因为常规 css 不适用于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

您可以创建自定义样式文件并导入该文件，而不是导入软件包附带的捆绑样式。像这样：

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

您可以覆盖特定的类。

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

见文件

Answer 3

可以创建一个组件来封装样式和连接库 styled-system 和 grid-styled

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

和

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