MUI X DatePicker v6无TextField时Popover定位异常求助

当移除DatePicker的TextField后，Popover因失去默认锚点会定位到屏幕左上角，以下是两种惯用的解决方法：

方法一：使用隐藏的TextField作为锚点 #

保留TextField但将其隐藏，既不影响视觉呈现，又能让Popover正常锚定：

import React, { useState } from "react";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import TextField from "@mui/material/TextField";

export default function BasicDatePicker() {
  const [open, setOpen] = useState(false);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 16,
        }}
      >
        <DemoContainer components={["DatePicker"]}>
          <button onClick={() => setOpen(!open)}>
            Toggle Calendar Open/Closed
          </button>
          <DatePicker
            open={open}
            onClose={() => setOpen(false)}
            slots={{
              // 渲染隐藏的TextField作为锚点
              textField: () => <TextField hidden />
            }}
          />
        </DemoContainer>
      </div>
    </LocalizationProvider>
  );
}

方法二：手动指定Popover的锚定元素 #

通过slotProps.popper.anchorEl直接指定锚定目标（比如触发按钮），需配合useRef获取DOM元素：

import React, { useState, useRef } from "react";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function BasicDatePicker() {
  const [open, setOpen] = useState(false);
  const toggleBtnRef = useRef(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 16,
        }}
      >
        <DemoContainer components={["DatePicker"]}>
          <button 
            ref={toggleBtnRef}
            onClick={() => setOpen(!open)}
          >
            Toggle Calendar Open/Closed
          </button>
          <DatePicker
            open={open}
            onClose={() => setOpen(false)}
            slots={{ textField: () => null }}
            slotProps={{
              popper: {
                // 手动指定锚定元素为触发按钮
                anchorEl: toggleBtnRef.current,
                placement: "bottom-start" // 可自定义弹出位置
              }
            }}
          />
        </DemoContainer>
      </div>
    </LocalizationProvider>
  );
}

两种方法对比：

• 方法一实现简单，无需额外DOM引用，适合快速解决问题；
• 方法二更灵活，可自由指定锚定元素和弹出位置，适合需要自定义交互逻辑的场景。

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