时间戳

首页 > 解决方案 > 如何修复 Material-UI 中“TextField”的浮动属性？

reactjs - 如何修复 Material-UI 中“TextField”的浮动属性？

问题描述

我正在使用 type='date' 的 material-ui textfied，当它没有与日期标签混合动画时。我想解决这个问题，我不希望它像下面的图片那样在顶部设置动画和固定

在此处输入图像描述

在此处输入图像描述

零件： 

<TextField 
  className={classes.inputFields} 
  error={errors.lastVisit && touched.lastVisit} 
  name='lastVisit' variant='standard' 
  type='date' 
  onChange={handleChange} 
  id='lastVisit' 
  label='Last Visit' 
  helperText={errors.lastVisit && touched.lastVisit? errors.lastVisit
    : null}
/>

并且使用material-ui的makeStyles函数应用的CSS和css是：

inputFields: {
  width: '100%',
  '& .MuiInputLabel-animated': {
    color: 'black',
    [theme.breakpoints.down('md')]: {
      fontSize: theme.spacing(2),
    }
  },
}

如何解决这个问题？

标签： reactjsmaterial-ui

解决方案

在您的情况下，快速解决方法是强制标签一直缩小。这可以通过添加InputLabelProps={{shrink: true}}到您的组件来完成。

所以你的组件应该看起来像

<TextField
     className={classes.inputFields}
     error={errors.lastVisit && touched.lastVisit}
     name='lastVisit'
     variant='standard'
     type='date'
     onChange={handleChange}
     id='lastVisit'
     label='Last Visit'
     helperText={errors.lastVisit && touched.lastVisit? errors.lastVisit : null}
     InputLabelProps={{shrink: true}}
/>

此外，如果您需要 datePicker 而不仅仅是输入，您可以从 MaterialUI 检查 MaterialUI/Pickers HERE中的 datePickers

推荐阅读