И fullWidth, и className в компоненте MUI

Question

Я хочу использовать свойства className и fullWidth для компонента TextField с пользовательским интерфейсом, но, похоже, это не сработает.

Использование только className работает хорошо, и просто fullWidth работает отлично, но когда япопробуйте использовать оба, он только слушает className.

//Only className, works fine
<TextField
    id="date"
    label="Only className"
    type="date"
    defaultValue="2017-05-23"
    className={classes.textField}
    InputLabelProps={{
        shrink: true
    }}
/>
//Only fullWidth, works fine
<TextField
    id="date"
    label="Only fullWidth"
    type="date"
    defaultValue="2017-05-24"
    fullWidth={true}
    InputLabelProps={{
        shrink: true
    }}
/>
//Both, not working (only className is applied)
<TextField
    id="date"
    label="Both"
    type="date"
    defaultValue="2017-05-25"
    className={classes.textField}
    fullWidth={true}
    InputLabelProps={{
        shrink: true
    }}
/>

Пример песочницы: https://codesandbox.io/s/material-demo-0qqqd

Answer 1

В своем стиле TextField вы переопределяете fullWidth опору, задавая собственную ширину 200 пикселей.

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: 200
}

измените ее на:

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  width: '100%'
}

или

просто удалите ширину из стиля textField

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
}

, затем в вашем TextField используйте fullWidth=true

  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-25"
    className={classes.textField}
    fullWidth={true}
    InputLabelProps={{
      shrink: true
    }}
  />