时间戳

首页 > 解决方案 > 自定义 'react-datepicker' css

reactjs - 自定义 'react-datepicker' css

问题描述

所以我将它渲染'react-datepicker'到一个自定义容器，如下所示：

<DatePicker
    {...bindedFormField}
    labelId={field.name + index}
    customInput={<DatePickerCustomInput {...bindedFormField} />}
    popperContainer={CalendarContainer}
    dateFormat="yyyy-MM-dd HH:mm"
    locale="pl"
    selected={field.value}
    onChange={(value) => field.onChange(field.name, value)}
    minDate={field.dateConfig?.minDate}
    minTime={field.dateConfig?.minDate}
    maxDate={field.dateConfig?.maxDate}
    maxTime={field.dateConfig?.maxDate}
    showTimeSelect
/>

容器在哪里：

import { Portal } from 'react-overlays';

export const CalendarContainer = ({ children }) => {
    const el = document.getElementById('calendar-portal')
    return (
        <Portal container={el}>
            {children}
        </Portal>
    )
}

我的问题是：如何自定义 DatePicker 的 css （更具体地说 - 我想增加z-index）。我会补充document.getElementById('calendar-portal')说它是空的，它不存在。

标签： reactjsreact-datepicker

解决方案

推荐阅读