MUI DatePicker自定义PickersDay加ID后需双击选中问题求助

问题背景 #

需求是为MUI DatePicker的每个日期按钮添加唯一ID，用于自动化测试场景。最初的实现代码如下：

const CustomDay = (props: any) => {
    const { day } = props;
    const uniqueId = `day-${format(day, 'yyyy-MM-dd')}`; // unique ID for each day
    return (
      <div id={uniqueId} key={uniqueId}>
        <PickersDay {...props} day={day} />
      </div>
    );
};

通过slots={{ day: CustomDay }}注入DatePicker的day插槽后，出现了需要快速双击才能选中日期的问题。

错误原因 #

在外层额外嵌套的<div>会拦截第一次点击事件，导致PickersDay组件无法正常接收点击触发的选中逻辑。MUI的日期选择组件依赖内部的事件处理流程完成状态切换，多余的容器节点破坏了事件传递链，所以需要通过双击才能触发实际的选中操作。

正确实现方式 #

无需额外嵌套容器，直接将唯一ID绑定到PickersDay组件本身即可：

import { format } from 'date-fns';
import { PickersDay } from '@mui/x-date-pickers';

const CustomDay = (props: any) => {
  const { day } = props;
  const uniqueId = `day-${format(day, 'yyyy-MM-dd')}`;
  return <PickersDay {...props} id={uniqueId} />;
};

这样既为每个日期按钮添加了唯一ID，完全满足自动化测试的标识需求，同时保留了组件原有的交互逻辑，不会出现点击失效或需要双击的问题。

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