React中Material UI+React Hook Form的DatePicker显示在左上角的原因？

核心原因 #

Material UI的DatePicker组件依赖LocalizationProvider提供的上下文来计算弹出日历层的定位。如果没有用该组件包裹DatePicker，弹出层无法获取正确的参照元素位置信息，就会默认渲染在页面左上角。另外，React Hook Form的Controller如果把field对象的所有属性直接传递给DatePicker，可能混入不必要的DOM属性，干扰定位逻辑。

解决方法 #

1. 添加LocalizationProvider包裹
   首先导入LocalizationProvider和对应的日期适配器（比如基于date-fns的AdapterDateFns），然后用它包裹你的DatePicker组件（建议在父组件或App层级包裹，方便全局复用）。

2. 精简Controller传递的属性
   只把DatePicker需要的value和onChange从field中解构出来传递，避免传递多余属性干扰组件逻辑。

修正后的完整代码示例 #

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Controller, useForm } from 'react-hook-form';
import TextField from '@mui/material/TextField';

function App() {
  const { control } = useForm({
    defaultValues: { date: null }
  });

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Controller
        control={control}
        name="date"
        rules={{
          validate: {
            min: (date) => !date || new Date(date) > new Date() || "请选择未来日期"
          }
        }}
        render={({ field: { onChange, value }, fieldState }) => (
          <DatePicker
            value={value}
            onChange={onChange}
            label="Date"
            renderInput={(inputProps) => (
              <TextField
                {...inputProps}
                error={!!fieldState.error}
                helperText={fieldState.error?.message}
              />
            )}
          />
        )}
      />
    </LocalizationProvider>
  );
}

export default App;

额外注意事项 #

• 确保已安装必要依赖：@mui/x-date-pickers、date-fns（使用AdapterDateFns时）
• 如果使用其他日期库（如dayjs），对应导入适配的适配器即可

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