css - 如何更改 react-dates 输入 css
问题描述
我正在使用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"
/>
解决方案
您可以创建自定义样式文件并导入该文件,而不是导入软件包附带的捆绑样式。像这样:
// 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;
}
有关更多信息,请查看此处的文档。
推荐阅读
- bash - 我怎样才能让 kubectl 保持沉默?
- android - 使用 java 应用程序实现 kotlin 模块产生 java.lang.NoClassDefFoundError: 资源类解析失败
- javascript - 使用辅助函数时未传递 Javascript 值
- html5-canvas - 在复杂的 HTML 画布形状周围(和内部)描边?
- database - 时空数据库/数据处理框架
- c# - DataTrigger 未在 DataGrid 中触发
- wordpress - 使用 Chart.js 从表单字段中绘制图形
- javascript - 如何为这些问题拍照
- bluetooth - 无法连接树莓派 Pi3B 蓝牙到 HC-06 模块?
- firebase - 访问 RemoteConfig 创建循环 Flutter Web