I am currently working with a component from material-ui/pickers and this is the code snippet:
<KeyboardDatePicker
value={selectedDate}
onChange={(_, newValue) => handleClick(newValue)}
labelFunc={renderLabel}
disableToolbar
variant='inline'
inputVariant='filled'
format='YYYYMMDD'
allowKeyboardControl
autoOk
inputProps={{
'data-testid': `input-${name}`
}}
InputAdornmentProps={{ position: 'start' }}
/>
One particular property seems to be causing issues. When I remove it, the styling looks fine and the icon is centered vertically within the component. However, when I attempt to move the icon to the beginning of the component, an additional style appears:
.MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel) {
margin-top: 16px;
}
This extra style causes the icon to appear off-center. Here is how it looks without InputAdornmentProps: [1]: https://i.sstatic.net/xxGaM.png
And here is how it looks with InputAdornmentProps: [2]: https://i.sstatic.net/dHA53.png
What could be the cause of this issue?