如何为MUI的MobileTimePicker组件设置small/medium尺寸？

MUI的MobileDatePicker和MobileTimePicker组件本身没有直接暴露size属性（不像Select那样），但它们内部基于TextField实现，所以可以通过以下两种方式设置尺寸：

方法一：通过textFieldProps传递尺寸属性 #

直接把size属性传递给组件内部的TextField，和Select的size效果完全一致：

修改后的代码示例 #

<FormControl className='gap-2 mb-8' fullWidth>
  <FormLabel htmlFor='activity-date' className='text-sm' required>
    Completed Date
  </FormLabel>
  <MobileDatePicker 
    format='dd/MM/yyyy' 
    value={activityDatetime}
    textFieldProps={{ size: 'small' }} // 设置为small尺寸
  />
</FormControl>

<FormControl className='gap-2 mb-8' fullWidth>
  <FormLabel htmlFor='activity-time' className='text-sm' required>
    Completed Time
  </FormLabel>
  <MobileTimePicker
    format='HH:mm'
    ampm={false}
    value={activityDatetime}
    textFieldProps={{ size: 'medium' }} // 设置为medium尺寸
  />
</FormControl>

方法二：自定义样式（灵活控制） #

如果需要更精细的样式调整，可以通过sx属性直接修改输入框的字体大小、高度等：

<MobileTimePicker
  format='HH:mm'
  ampm={false}
  value={activityDatetime}
  sx={{
    '& .MuiInputBase-root': {
      fontSize: '0.875rem', // 对应small尺寸的字体大小
      minHeight: 32, // small尺寸的输入框高度
    },
    '& .MuiFormLabel-root': {
      fontSize: '0.75rem', // 同步调整标签字体大小
    }
  }}
/>

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