Material UI Date Range Picker组件无显示问题求助

核心问题与修复方案 #

• 适配器导入大小写错误
  代码中AdapterdateFns的导入存在大小写错误，正确名称应为AdapterDateFns（注意Date的首字母大写）。错误的导入会导致LocalizationProvider无法加载有效的日期适配器，进而引发组件无法渲染。修正后的导入代码：

  import AdapterDateFns from "@mui/lab/AdapterDateFns"
  

• 组件命名冲突
  你将组件命名为Date，这与JavaScript内置的Date构造函数重名，可能引发隐性冲突。建议修改组件名称，例如：

  const DateRangePickerComponent = () => {
    // 原组件逻辑保持不变
  }
  export default DateRangePickerComponent
  

• 依赖缺失检查
  AdapterDateFns依赖date-fns库处理日期逻辑，请确认已安装该依赖：

  npm install date-fns
  # 或使用 yarn
  yarn add date-fns
  

• CSS样式排查
  可临时注释掉import "./date.css"，排查是否是自定义CSS（如display: none、定位异常等）导致组件被隐藏。

修正后的完整代码示例 #

import "./date.css"
import { LocalizationProvider } from "@mui/lab"
import AdapterDateFns from "@mui/lab/AdapterDateFns"
import { Box, TextField } from "@mui/material"
import { DateRangePicker } from "@mui/lab"
import { useState } from "react"

const DateRangePickerComponent = () => {
  const [value, setValue] = useState([null, null])
  console.log(value)
  return (
    <div className="date">
      <div className="datePicker">
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <Box width="500px">
            <DateRangePicker
              startText="arriver"
              endText="depart"
              value={value}
              onChange={(newValues) => {
                setValue(newValues)
              }}
              renderInput={(startProps, endProps) => (
                <>
                  <TextField {...startProps} />
                  <Box sx={{ mx: 2 }}>à</Box>
                  <TextField {...endProps} />
                </>
              )}
            />
          </Box>
        </LocalizationProvider>
      </div>
    </div>
  )
}
export default DateRangePickerComponent

内容的提问来源于stack exchange，提问作者Abdoul Hamani