时间戳

首页 > 解决方案 > Material UI Popover 打开越界

javascript - Material UI Popover 打开越界

问题描述

我在我的应用程序中使用以下代码，尝试在弹出框元素内打开一个 react-dates 选择器控制器，对于大多数用例，它工作得很好，只有当按钮位于屏幕底部时，弹出框才会退出界限。

有没有办法解决这个问题？因为从材质 ui 示例中弹出框总是自动移动

编辑：https ://codesandbox.io/s/focused-https-5w8wb?file=/src/App.js

import 'react-dates/initialize'

import React, { useState, useRef } from 'react'

import Popover from '@material-ui/core/Popover'
import { withStyles } from '@material-ui/core/styles'
import { DayPickerSingleDateController, isInclusivelyBeforeDay, isSameDay } from 'react-dates'

const defaultAnchor = { vertical: 'bottom', horizontal: 'left' }
const defaultTransform = { vertical: 'top', horizontal: 'left' }
const StyledPopover = withStyles(() => ({
  root: { zIndex: '2000 !important' },
  paper: { overflowY: 'auto'}
}))(Popover)

export default function PopoverDatePicker (props) {
  const { date } = props

  const [anchorEl, setAnchorEl] = useState(null)
  const [focus, setFocus] = useState(false)

  const handleOpen = e => setAnchorEl(e.currentTarget)
  const handleClose = () => setAnchorEl(null)

  const open = Boolean(anchorEl)
  const id = open ? 'simple-popover' : undefined

  const value = date
    ? date.clone().format('MM/DD/YYYY')
    : props.placeholder || 'Select date...'

  return (
    <div>
      <div onClick={e => !props.disabled && handleOpen(e)}>
        {value}
      </div>

      <StyledPopover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={defaultAnchor}
        transformOrigin={defaultTransform}
      >
        <DayPickerSingleDateController
          daySize={28}
          focused={focus}
          date={props.date}
          numberOfMonths={1}
          hideKeyboardShortcutsPanel
          onFocusChange={() => setFocus(true)}
          renderMonthElement={date => <MonthElement date={date} />}
          isOutsideRange={day => props.maxDate && !isInclusivelyBeforeDay(day, props.maxDate)}

          navPrev={<DatePickerArrows left />}
          navNext={<DatePickerArrows right />}

          onDateChange={date => {
            props.onChange(date)
            !props.keepOpenOnDateSelect && handleClose(null)
          }}
        />
      </StyledPopover>
    </div>
  )
}

标签： javascriptreactjsmaterial-uimaterial-design

解决方案

问题不在于 MUI/Popover

如果您尝试发表评论//import "react-dates/lib/css/_datepicker.css";，则效果很好！

您必须检查react-dates的文档并尝试覆盖样式：

在此处查看文档https://github.com/airbnb/react-dates#overriding-styles

推荐阅读