MUI X v6中TimePicker移除renderInput后如何用TextField显示错误信息？

在MUI X v6中，TimePicker确实移除了renderInput属性，改用slot系统实现组件定制。针对你的需求，有两种方式可以复刻原代码的效果：

方式一：用slotProps快速传递属性 #

如果只是需要给输入框添加error状态、helperText和样式，直接通过slotProps.input传递对应属性即可，写法简洁高效：

<TimePicker
  label="选择时间"
  slotProps={{
    input: {
      sx: { width: '100%' },
      error: true,
      helperText: "Your error message"
    }
  }}
/>

方式二：自定义Input组件实现高度定制 #

如果需要更复杂的自定义逻辑（比如额外添加元素、修改内部结构），可以通过components属性替换默认的Input组件，完全还原原renderInput的灵活性：

// 自定义输入组件
const CustomTimeInput = (props) => {
  return (
    <TextField
      {...props}
      sx={{ width: '100%' }}
      error
      helperText="Your error message"
      // 这里可以添加更多自定义逻辑，比如额外图标、事件处理等
    />
  );
};

// 挂载自定义组件的TimePicker
<TimePicker
  label="选择时间"
  components={{ Input: CustomTimeInput }}
/>

两种方式都能实现你需要的错误信息显示效果，前者适合简单配置场景，后者适配高度定制需求。

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