Исправление плавающего свойства TextField в пользовательском интерфейсе

Question

Я использую Material-UI textfied типа = '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}
/>

и CSS, примененные с использованием функции makeStyles material-ui, а 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 DatePickers внутри MaterialUI / Pickers ЗДЕСЬ