Question

我从material-ui / pickers中获得了这个组件：

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

此属性引起了问题。没有它，样式就很好，图标在组件中垂直居中。当我尝试将图标移动到组件的开头时，出现了一种额外的样式：

    .MuiInputAdornment-filled.MuiInputAdornment-positionStart:not(.MuiInputAdornment-hiddenLabel) {
   margin-top: 16px;
}

这会使图标偏离中心。这是没有InputAdornmentProps的样子： [1]：https://i.stack.imgur.com/xxGaM.png

并带有： [2]：https://i.stack.imgur.com/dHA53.png

可能是什么原因造成的？

Answer 1

请尝试以下操作，并参考here以获得更多详细信息。

InputAdornmentProps={{ position: 'start', variant: 'standard' }}

Answer 2

对我来说，解决此问题的方法是指定KeyboardButtonProp-edge：“开始。请参见此处https://material-ui.com/api/icon-button/

Material-ui / pickers：当将位置开始的InputAdornmentProps属性添加到KeyboardDatePicker时，出现不必要的边距

2 个答案: