React Material TextArea样式已损坏

Question

我正在关注this example的基本登录屏幕。对React来说是个新手，但到目前为止我发现它非常简单。

很遗憾，如下面的屏幕截图所示，TextArea看起来很糟糕！似乎内部填充物被弄乱了。

我不确定自己做错了什么。

字段应如下所示：

代码如下：

import React from 'react';
import { FunctionComponent, useState } from 'react';

import Paper from '@material-ui/core/Paper';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Button from '@material-ui/core/Button';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import { makeStyles } from '@material-ui/core/styles';

export interface ComponentProps {
  email: string;
  password: string;
  name: string;
  showPassword: boolean;
}

const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  sideImage: {
    backgroundImage: '',
    backgroundRepeat: 'no-repeat',
    backgroundColor: theme.palette.grey[900],
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  form: {
    marginTop: theme.spacing(1),
    width: '100%',
  },
  logo: {
    margin: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export const ReactLoginComponent: FunctionComponent<ComponentProps> = (props) => {
  const classes = useStyles();
  const [values, setValues] = useState({
    email: '',
    password: '',
    name: 'Davey Jones',  // TODO: un hardcode this!
    showPassword: false,
  });

  const handleChange = (prop) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setValues({ ...values, [prop]: event.target.value });
  };

  const handleClickShowPassword = () => {
    setValues({ ...values, showPassword: !values.showPassword });
  };

  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
  };

  const login = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    alert(`Welcome ${values.name}`);
  };

  return (
    <Grid container component="main" className={classes.root}>
      <Grid item xs={12} sm={8} md={7} lg={4} component={Paper} elevation={0}>
        <div className={classes.paper}>
          <Avatar
            src="../../../assets/img/logo/logo-half.png"
            alt="Branding"
            className={classes.logo}
          />
          <Typography component="h1" variant="h6">
            Welcome Back {values.name}
          </Typography>
          <form noValidate className={classes.form}>
            {/* Email */}
            <TextField
              required
              fullWidth
              autoFocus
              id="email"
              variant="outlined"
              label="Email"
              margin="normal"
              type="text"
              value={values.email}
            />
            {/* Password */}
            <TextField
              required
              fullWidth
              id="password"
              variant="outlined"
              label="Password"
              margin="normal"
              type={values.showPassword ? 'text' : 'password'}
              value={values.password}
              onChange={handleChange('password')}
              autoComplete="current-password"
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      aria-label="Toggle password visibility"
                      onClick={handleClickShowPassword}
                      onMouseDown={handleMouseDownPassword}
                    >
                      {values.showPassword ? <Visibility/> : <VisibilityOff/>}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary"/>}
              label="Remember me"
            />
            <Button
              fullWidth
              type="submit"
              variant="contained"
              size="large"
              className={classes.submit}
              onClick={login}
            >
              Sign in
            </Button>
          </form>
        </div>
      </Grid>
      <Grid item xs={false} sm={4} md={5} lg={8} className={classes.sideImage}>

      </Grid>
    </Grid>
  );
};

版本：

• "react": "^16.12.0"
• "@material-ui/core": "^4.10.2"
• "@material-ui/icons": "^4.9.1"
• "@material-ui/styles": "^4.10.0"

编辑：

我应该提到我在Angular应用程序中使用React，该应用程序使用Angular Material并具有某些组件的全局替代。这可能就是问题所在。我该如何专门从React组件否定那些全局更改？还是可以在此组件中覆盖它们？