Material-UI Multiline TextField прокручивается по горизонтали

Question

Я пытаюсь использовать Material UI для реализации многострочного TextField. Вместо того, чтобы быть многострочным, поле ввода прокручивается горизонтально. Я повторил проблему в песочнице кода (ссылка ниже). Это поле Описание объявления в FormItemDetails. js, которое я хочу быть многострочным. Я благодарен за любую помощь! Спасибо

Код Песочница

import React, { useState, useEffect } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

export default function FormItemDetails(props) {
    const { values, handleChange } = props;
    const [ error, setError ] = useState(null)
    console.log(values)

    const errorDiv = error 
    ? <div className="error">
        <i class="material-icons error-icon">error_outline</i>
        {error}
      </div> 
    : '';

    useEffect(() => setError(null), []);

    function cont(e) {
        e.preventDefault();

        const requiredFields = ['title', 'description', 'price']

        for (const key of requiredFields) {
            if (!values[key]) {
                setError(`A ${key} is required`)
                return
            }
        }
        props.nextStep();
    };  

    function back() {
        props.prevStep();
    }


    return (
        <MuiThemeProvider>
            <>
            <h2>Enter the advertisement details</h2>
            {errorDiv}
            <TextField 
                required={true}
                fullWidth={true}
                hintText="Enter Your Ad Title"
                floatingLabelText="Ad Title"
                onChange={handleChange('title')}
                defaultValue={values.title}
            />
            <br />
            <TextField 
                required={true}
                fullWidth={true}
                multiline
                hintText="Enter Your Ad Description"
                floatingLabelText="Ad Description"
                onChange={handleChange('description')}
                defaultValue={values.description} 
            />
            <br />
            <TextField 
                required
                fullWidth
                hintText="Enter Your Asking Price"
                floatingLabelText="Price"
                onChange={handleChange('price')}
                defaultValue={values.price}
                
            />
            <br />
            <RaisedButton
                label="Continue"
                primary={true}
                style={styles.button}
                onClick={cont}
            />
            <RaisedButton
                label="Back"
                primary={false}
                style={styles.button}
                onClick={back}
            />
            </>
        </MuiThemeProvider>
    )
}

Answer 1

Обновление библиотеки material-ui, используемой в проекте. На самом деле вы используете material-ui/TextField и должны изменить на @material-ui/core/TextField для достижения ожидаемого поведения в textField. Проверьте это демо codesandbox.io / s / t8dkp

Внимание! Проверьте и последнюю версию библиотеки.