如何修复Material-UI中`TextField`的浮动属性？

Question

我使用的是 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),
    }
  },
}

如何解决这个问题？

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/Pickers HERE中从 MaterialUI 检查 datePickers