React-Datepicker: Как я могу изменить стрелки навигации?

Question

У меня есть ситуация, когда я должен изменить стрелки навигации, доступные по умолчанию в компоненте response-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;
}

Но это не работает.

Может кто-нибудь помочь мне в том, как изменить изображение на навигационных изображениях?

ПРИМЕЧАНИЕ. Я проверил документацию по response-datepicker и другие SO-запросы, но пока нигде не нашел соответствующей справки по этому вопросу.

Answer 1

Если вы говорите об этом компоненте DatePicker - они строят стрелки, используя границы. Поэтому, чтобы использовать пользовательские изображения для стрелок, достаточно установить соответствующие width а также height для конкретной кнопки со стрелкой и устранения границы.

Используя ваш пример, кажется, что следующий будет работать:

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