As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types.
My observation is that the material ui date picker does not line up correctly with text fields.
Here's the code snippet:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container direction={'row'} alignItems={'center'}>
<Grid item>
<KeyboardDatePicker
disableToolbar
variant="inline"
inputVariant="outlined"
format="dd-MM-yyyy"
margin="normal"
id="date1"
value={'12-09-2021'}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
size="small"
required
/>
</Grid>
<Grid item>
<TextField id="text1" size="small" variant="outlined" required />
</Grid>
<Grid item>
<TextField id="text2" size="small" variant="outlined" required />
</Grid>
</Grid>
</MuiPickersUtilsProvider>
Here's how it currently appears:
https://i.stack.imgur.com/CZ8jX.png
The issue only gets worse when adding form labels and helper texts. Is there a way to make these form fields display nicely side by side?