Material -UI中TextFields内的奇怪白线

时间:2019-04-08 15:46:26

标签: reactjs material-ui

我正在尝试使用Material-UI组件在ReactJS中创建一个简单的登录表单。使用MUI提供的TextField时,它总是在TextField组件内部显示一条奇怪的白线,如图所示, enter image description here

我尝试了MUI提供的不同类型的TextField和Input字段,但是无论我总是看到什么白线。我还没有调整代码,只是从官方文档中复制/粘贴代码。我无法找到问题的根本原因,因为我才刚刚开始学习ReactJS和Material-UI,

我为此的代码

import React, { Component } from "react";
import AccountCircle from '@material-ui/icons/AccountCircle';
import { withStyles } from '@material-ui/core/styles';
import {
  Grid,
  Card,
  CardContent,
  Typography,
  TextField,
} from '@material-ui/core'

import axios from 'axios'

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 200,
  },
});

class Login extends Component {
  state = {
    errors: {
      name: "",
      password: ""
    }
  };

  constructor(props) {
    super(props);
    this.emailInputRef = React.createRef();
    this.passwordInputRef = React.createRef();
  }


  login = () => {
   // handle login

  }

  render() {
    const { errors } = this.state;
    const { classes } = this.props;
    return (
      <Grid
        container
        direction="row"
        justify="center"
        alignItems="center">
        <Grid item xs={8} sm={8} md={10} xs={12}>
          <Card style={{ marginTop: '10px', color: 'white' }} className='bg-primary'>
            <CardContent>
              <Typography color="inherit" variant="h2">Login</Typography>
              <Grid item>
                <TextField
                  id="outlined-simple-start-adornment"

                  variant="outlined"
                  label="With outlined TextField"
                  fullWidth
                />
              </Grid>

              <Grid item>
              <TextField
                  id="outlined-simple-start-adornment"

                  variant="outlined"
                  label="With outlined TextField"
                  fullWidth
                />
              </Grid>


            </CardContent>
          </Card>
        </Grid>
      </Grid>

    );
  }
}

export default withStyles(styles)(Login);

我尚未为此页面使用任何外部CSS。任何帮助将不胜感激。

0 个答案:

没有答案