MUI5 MobileDateTimePicker自定义弹窗样式及完整日期时间显示问题

弹窗样式不生效的修复 #

直接在组件sx中设置弹窗内的类名无效，因为弹窗通过Portal挂载到DOM根节点，不在组件自身DOM层级下。需通过slotProps针对弹窗内的目标组件注入样式：

<MobileDateTimePicker
  label="End DateTime"
  inputRef={ref}
  minDate={subDays(new Date(), 90)}
  disableFuture
  {...field}
  views={["day", "hours", "minutes"]}
  slotProps={{
    // 针对工具栏（Toolbar）设置样式
    toolbar: {
      sx: {
        "& .MuiPickersToolbarText-root.Mui-selected": {
          color: "#fff",
          backgroundColor: "#e91e63",
          fontWeight: 600,
          transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)",
          borderRadius: "50%",
          fontSize: "0.75rem",
          width: "36px",
          height: "36px",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
        },
        "& .MuiDateTimePickerToolbar-separator": {
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
        },
      },
    },
    // 如需修改弹窗容器样式，可添加popper的配置
    popper: {
      sx: {
        // 自定义弹窗容器样式
      },
    },
  }}
/>

若要修改弹窗内其他区域（如日期选择面板、时间选择器），可对应使用dayPicker、timePicker等slot的sx属性。

输入框完整显示日期时间的设置 #

配置views={["day", "hours", "minutes"]}后，默认格式仅展示选中视图的内容，需手动指定format属性定义完整格式：

<MobileDateTimePicker
  // 其他属性保持不变
  format="yyyy-MM-dd HH:mm" // 按需调整格式，例如"MM/dd/yyyy hh:mm a"（12小时制带AM/PM）
/>

格式占位符规则：yyyy为4位年份，MM为2位月份，dd为2位日期，HH为24小时制小时，hh为12小时制小时，mm为分钟，a为AM/PM标识。

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