React日期选择器日历显示在表头后面。

Question

我在项目中使用了React的DatePicker和Fixed-Data-Table-2插件。当我打开日历时，它出现在表头后面。以下是CSS文件的代码：

.ui-datepicker {
   z-index: 9999 !important;
}
.table{
   z-index: -1000  !important;
}

以下是DatePicker的React代码：

 <div className='ui-datepicker'>
           <DatePicker
                 selected={this.state.startDate}
                 selectsStart
                 startDate={this.state.startDate}
                 endDate={this.state.endDate}
                 onChange={this.onFilterStart}
            />
</div>

以下是表格的快捷代码：

<div className='table'>
     <Table
            rowHeight={50}
            rowsCount={tableData.getSize()}
            width={1000}
            maxHeight={1800}
            height={700}
            groupHeaderHeight={30}
            headerHeight={50}
            onColumnResizeEndCallback={this.resizeEndCallback}
            isColumnResizing={false}
            >
            <ColumnGroup
                header={<Cell>Basic Info</Cell>}>
                <Column columnKey='menuTranslation'
                        header={ <SortHeaderCell
                                languageChosen={this.state.languageChosen}
                                onSortChange={this.sortChange}
                                sortDir={colSortDirs.foodName}>Food 
              Name</SortHeaderCell>}
                        isResizable={true}
                        width={columnWidths.foodName}
                        cell={<MyTextCell data={tableData}  
              field='menuTranslation' col="menuTranslation"  />}
                />
<div>

这是问题的图片：

- xxddoo

Answer 1

尝试在.react-datepicker-popper上设置z-index，而不是在日期选择器上设置。这是react-date-picker在创建弹出窗口时使用的className。

.react-datepicker-popper {
    z-index: 9999 !important;
}

- R. Wright

Answer 2

这是因为 Material-UI 的 Paper 组件样式。Paper 组件有一个 overflow: hidden 样式，通过移除它可以完美地解决问题。

import Card from "@material-ui/core/Card";
...
<Card>
<DayPickerInput  id="servdate" name="servdate"  dateFormat="yyyy-mm-dd"/>
</Card>

在样式设置中，.MuiCard-root{ overflow: visible!important; }表示卡片元素的溢出内容可见，并强制覆盖原有样式。

- raji raji

Answer 3

如果有人正在使用Material-UI Cards并且遇到了类似的问题，我通过将z-index: 0 !important添加到CardHeader样式中来解决它（我注意到在Chrome开发工具中默认情况下它具有z-index: 3! important）。

<CardHeader style={{zIndex: '0 !important'}}>
... 
</CardHeader>

- Nicolás Alejandro Méndez