Material-ui/pickers:当 InputAdornmentProps 属性 位置开始添加到 KeyboardDatePicker 时出现不需要的边距
Material-ui/pickers: When InputAdornmentProps property with position start added to KeyboardDatePicker an unwanted margin appears
我有来自 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
可能是什么原因造成的?
尝试如下操作,并参考 here 了解更多详情。
InputAdornmentProps={{ position: 'start', variant: 'standard' }}
对我来说,解决此问题的方法是指定 KeyboardButtonProp - edge: "start。请参阅此处 https://material-ui.com/api/icon-button/
我有来自 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
可能是什么原因造成的?
尝试如下操作,并参考 here 了解更多详情。
InputAdornmentProps={{ position: 'start', variant: 'standard' }}
对我来说,解决此问题的方法是指定 KeyboardButtonProp - edge: "start。请参阅此处 https://material-ui.com/api/icon-button/