How to change the height of MUI X Date Picker input box in React

Question

<DesktopDatePicker
    label="Expiration Date"
    inputFormat="MM/dd/yyyy"
    value={self.didexpirationdate}
    onChange={(e)=>{
    setSelf({...self,didexpirationdate:e})
    }}
    renderInput={(params) => <TextField {...params} />}/>

How to set the height of this DatePicker in react?

Answer 1

Date Component - V5

TextField component is used as input box so you can directly add the size there. please refer https://mui.com/components/text-fields/#sizes

...
renderInput={(params) => <TextField size="small" {...params} />}/>

Date Component - V6

in V6 version slotProps is introduced to customise the appearance of date component. please refer https://mui.com/x/react-date-pickers/custom-field/ for more details.

<DatePicker
  label="Small picker"
  slotProps={{ textField: { size: 'small' } }}
/>