material-uiでtext入力作成

スタイル定義

const useStyles = (theme:Theme) => {
    return makeStyles({
        container: {
            margin: theme.spacing(2)
        }
    })
}

TextFieldに各種設定する。placeholderやhelperTextが使えます。
onChangeで変更を検知できます。

const TextInputSample = () => {
    const theme = useTheme()
    const styles = useStyles(theme)()
    const [first, setFirst] = useState("")
    const [second, setSecond] = useState("")
    const [third, setThird] = useState("")

    return (
        <form className={styles.container} noValidate autoComplete="off">
                <TextField
                    id="first"
                    label="First"
                    value={first}
                    placeholder="under text"
                    contentEditable="true"
                    onChange={e => {
                        setFirst(e.target.value)
                    }}
                >
                </TextField>
                <TextField
                    id="second"
                    label="Second"
                    value={second}
                    helperText="text help"
                    contentEditable="true"
                    onChange={e => {
                        setSecond(e.target.value)
                    }}
                >
                </TextField>
                <TextField
                    id="third"
                    label="Third"
                    value={third}
                    contentEditable="true"
                    onChange={e => {
                        setThird(e.target.value)
                    }}
                >
                </TextField>
        </form>
    )
}


export default TextInputSample