修复材质ui中TextField的float属性

Question

当我没有将其与日期标签混合使用动画时，我使用的是材质为type ='date'的用户界面文本。 我想解决这个问题，我不希望它像下面的图片那样动画并固定在顶部

组件：

<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和CSS的makeStyles函数应用的CSS是：

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

如何解决该问题？

Answer 1

这种情况下的快速解决方法是强制标签始终缩小。可以通过在组件中添加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。