javascript - Material-ui 文本字段组件不看且无法正常工作

Question

// React
import { useState } from 'react'

// Material ui
import { TextField, makeStyles, Button, Typography } from '@material-ui/core'

const useStyles = makeStyles({
  loginInput: {
    width: "100%",
    marginTop: 15,
  },
  button: {
    width: "100%",
    marginTop: 15
  }
})

const Login = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [passwordConfirmation, setPasswordConfirmation] = useState("")

  const classes = useStyles()

  return (
    <div className="form">
      <form className="login-form">
        <TextField label="Email" onChange={e => setEmail(e.target.value)} value={email} required type="email" variant="outlined" color="primary" className={classes.loginInput} />
        <TextField label="Password" onChange={e => setPassword(e.target.value)} value={password} required type="password" variant="outlined" className={classes.loginInput} />
        <TextField label="Password Confirmation" onChange={e => setPasswordConfirmation(e.target.value)} value={passwordConfirmation} required type="password" variant="outlined" color="primary" className={classes.loginInput} />
        <Button type="submit" variant="contained" className={classes.button}><Typography>Login</Typography></Button>
      </form>
    </div>
  )
}

export default Login

这是我的登录组件的代码，我找不到任何问题，但它没有正确呈现输入组件，如图所示，所以请帮我找出问题所在。

标签： javascriptreactjsmaterial-ui