React-Datepicker：如何更改导航箭头？

Question

我有一种情况，我应该更改 react-datepicker 组件中默认可用的导航箭头。

我发现并尝试了什么？

我发现日期选择器使用 button 标签并使用 class 来应用如下图标：

<button type="button" class="react-datepicker__navigation react-datepicker__navigation--previous react-datepicker__navigation--previous--disabled"></button>
<button type="button" class="react-datepicker__navigation react-datepicker__navigation--next"></button>

我尝试在 right/next 导航按钮上使用预期图像实现背景：

.react-datepicker__navigation--next {
    background: url(../images/rightArrow.png) no-repeat !important;
    right: 10px;
    width: 15px;
}

但是没用。

谁能帮我看看如何更改导航图片上的图片？

注意： 我检查了 react-datepicker 文档和其他 SO 查询，但到目前为止没有找到任何相关帮助。

Answer 1

如果您谈论的是 this datepicker 组件 - 他们使用边框构建箭头。因此，要为箭头使用自定义图像，为特定箭头按钮设置适当的 width 和 height 并消除边框就足够了。

使用您的示例，next 似乎可行：

.react-datepicker__navigation--next {
    background: url(../images/rightArrow.png) no-repeat;
    width: 15px;
    height: 15px;
    border: none;
}

React-Datepicker：如何更改导航箭头？

React-Datepicker: How can I change the navigation arrows?

css

reactjs

react-datepicker