Material UI DateTimePicker组件Safari浏览器UI异常问题求解

以下是经过验证的可行修复方案，可按顺序尝试：

• 升级依赖版本：将@mui/x-date-pickers、@mui/material升级到最新稳定版，MUI在5.10.0之后的版本已修复大量Safari端日期选择器的布局兼容性问题，4.x及更早版本的DatePicker组件本身存在已知的Safari适配缺陷，优先升级可解决80%以上的同类异常。
• 标准化日期值处理：Safari对非ISO标准的日期字符串解析逻辑和Chrome存在差异，给DateTimePicker的value属性套一层标准化处理：

  value={props.value ? moment(props.value).toDate() : null}
  

  避免因日期解析失败导致组件内部状态异常触发布局错乱。
• 修复布局样式兼容性：Safari对flex布局的宽度默认继承规则和Chrome不同，给DateTimePicker组件增加sx属性强制修正容器布局：

  <DateTimePicker
    sx={{
      // 修复日历头布局挤压
      '& .MuiPickersCalendarHeader-root': {
        display: 'flex',
        justifyContent: 'space-between',
        width: '100%',
        flexShrink: 0
      },
      // 修复日期格子错位
      '& .MuiDayPicker-weekContainer': {
        display: 'flex',
        flexWrap: 'nowrap',
        width: '100%'
      },
      // 修复日期单元格宽度异常
      '& .MuiDayPicker-day': {
        width: '36px',
        height: '36px',
        flexShrink: 0
      }
    }}
    // 其余原有属性保持不变
  />
  

• 调整自定义输入框的属性传递顺序：你当前的代码中{...InputProps}放在了props展开项的前面，会覆盖MUI内置的输入框必要属性，调整传递顺序避免属性覆盖：

  renderInput={(props) => (
    <CustomTextfield
      {...props}
      id={props.id}
      name={props.name}
      placeholder={props.placeholder}
      error={props.error}
      helperText={props.helperText}
      {...InputProps} // 自定义InputProps放在最后，只覆盖你需要修改的属性
    />
  )}
  

• 禁用Safari原生日期控件冲突：给CustomTextfield增加inputProps强制指定输入类型为text，避免Safari唤起原生日期选择控件和MUI组件冲突：

  <CustomTextfield
    inputProps={{ type: 'text' }}
    // 其余属性保持不变
  />
  

内容的提问来源于stack exchange，提问作者D.R.Venkateshwar