如何更改反应日期输入 css

Question

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

您可以覆盖特定类。

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

见文档

Answer 3

可以创建一个组件来封装样式和连接库样式系统和网格样式

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

和

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