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

Question

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

我发现并尝试了什么？

我发现 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消除边框就足够了。

使用您的示例似乎 next 会起作用：

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