我正在尝试使用Material-UI组件在ReactJS中创建一个简单的登录表单。使用MUI提供的TextField时,它总是在TextField组件内部显示一条奇怪的白线,如图所示,
我尝试了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。任何帮助将不胜感激。