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

Question

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

我发现并尝试了什么？

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

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

我尝试使用右侧/下一个导航按钮上的预期图像实现背景：

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

但它不起作用。

任何人都可以帮助我更改导航图像上的图像吗？

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

Answer 1

如果你在谈论这个 datepicker组件 - 他们使用边框构建箭头。因此，为箭头使用自定义图像它会是足够的一套合适的width和height特定箭头按钮，消除边界。

使用您的示例似乎下一步会起作用：

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