如何将MUI MobileDateTimePicker的时钟替换为MultiSectionDigitalClock

我在应用中使用MobileDateTimePicker组件，其默认集成的是模拟时钟，但我希望替换为MultiSectionDigitalClock组件。我尝试了多个不同的slot（openPickerButton、openPickerIcon、inputAdornment、clock、digitalClock），代码示例如下：

<MobileDateTimePicker
  slotProps={{
    textField: {
      fullWidth: true,
    },
  }}
  open={open}
  onClose={() => setOpen(false)}
  value={currentDateTime}
  ampm={false}
  format="yyyy-MM-DD HH:mm"
  showDaysOutsideCurrentMonth={true}
  views={['year', 'month', 'day', 'hours', 'minutes']}
  slots={{
    textField: (params) => <TextField {...params} />,
    openPickerButton: MultiSectionDigitalClock as any,
  }}
/>

我还尝试了以下写法：

components={{
  OpenPickerIcon: MultiSectionDigitalClock,
}}
componentsProps={{
  textField: {
    fullWidth: true,
  },
}}
renderInput={(params) => <TextField {...params} />}

请问我哪里配置出错了？或者是否支持这样的替换？

解决方案 #

要替换MobileDateTimePicker的默认模拟时钟为MultiSectionDigitalClock，核心是用对**slots.clock**插槽，以下是修正后的配置逻辑：

1. 错误原因分析 #

• openPickerButton/openPickerIcon是用来替换「打开选择器的按钮/图标」，和时钟视图本身无关；
• components语法是MUI X旧版API，新版已改用slots和slotProps，旧写法不会生效；
• 不存在digitalClock插槽，控制时钟视图的正确插槽名是clock。

2. 正确代码示例 #

import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker';
import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
import TextField from '@mui/material/TextField';

// 你的组件状态逻辑（如open、currentDateTime、setOpen）

<MobileDateTimePicker
  slotProps={{
    textField: {
      fullWidth: true,
    },
  }}
  open={open}
  onClose={() => setOpen(false)}
  value={currentDateTime}
  ampm={false}
  format="yyyy-MM-dd HH:mm"
  showDaysOutsideCurrentMonth={true}
  views={['year', 'month', 'day', 'hours', 'minutes']}
  slots={{
    textField: (params) => <TextField {...params} />,
    // 指定clock插槽为MultiSectionDigitalClock
    clock: MultiSectionDigitalClock,
  }}
/>

3. 额外注意事项 #

• 确保你的@mui/x-date-pickers版本为最新稳定版，MultiSectionDigitalClock是较新版本引入的组件，旧版可能不支持；
• 无需额外类型断言（as any），MultiSectionDigitalClock会自动接收picker传递的上下文参数，直接赋值给slots.clock即可。

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