How to set size of MobileTimePicker component?

Question

I have code like this:

<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} />
</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}
  />
</FormControl>

How to set the size(small | medium) like in other MUI components?

In Select component for example, i can set the size using size props:

<Select size='small' id='type' />

Thanks

Answer 1

For those who face this problem too, I have found the answer, we can use slotProps to change the size of the textField like this:

<MobileTimePicker
  label="Time"
  slotProps={{textField:{size:'small'}}}
/>

Docs: https://mui.com/x/react-date-pickers/base-concepts/#overriding-slots-and-slot-props