我们如何自定义 react-datepicker 导航按钮（--next 和 --previous）

【问题标题】：How can we customize react-datepicker navigation buttons (--next and --previous )我们如何自定义 react-datepicker 导航按钮（--next 和 --previous）
【发布时间】：2020-12-07 07:27:55
【问题描述】：

我正在使用 reactDatePikcer，需要使用其他一些图标更改下一个和上一个导航。看不到任何 API 来更改下一个和上一个按钮。

【问题讨论】：

标签： javascript react-datepicker

【解决方案1】：

使用 CSS。例如隐藏使用边框属性创建的箭头并将其替换为您自己的 css，图标字体的文本。

/* Hide current arrow */
.react-datepicker__navigation--previous {
   border-right-color: transparent;
} 
/* Display something else */
.react-datepicker__navigation--previous:after {
   content: 'XXX'
}

【讨论】：

透明隐藏但不能：在内容未替换后。似乎它应该可以工作但不能替换。

【解决方案2】：

尝试使用pickers from material-ui。它们提供了一个自定义组件的钩子，并且在我看来也只是让选择器看起来更好。

【讨论】：

不能切换库:-)