css - 更改为移动布局时，material-ui 响应更改

Question

我一直在尝试学习如何使用 material-ui 做出反应，并尝试实现登录屏幕。这是我的沙盒链接：https ://codesandbox.io/s/cool-bird-tc95j?file=/src/App.js

我不知道什么时候有移动显示，那么卡片的宽度看起来不错，但是当它是网络形式时，它的宽度非常大。

我在这做错了什么？

    import React, { PureComponent, Fragment, Component } from 'react'
import stylesheet from './register.sass'
import Grid from '@material-ui/core/Grid'
import TextField from '@material-ui/core/TextField/TextField'
import Paper from '@material-ui/core/Paper/Paper'
import Typography from '@material-ui/core/Typography'
import InputAdornment from '@material-ui/core/InputAdornment/InputAdornment'

class Login extends Component {
    render() {
        return (
            <Fragment>
              <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
                <div className="body">
                    <div className="container">
                        <Grid container className="d-flex justify-content-center">
                            <Paper elevation={3} className="logincontainer" >
                                <div className="signup_header mt-3">
                                    <Typography component="h1" variant="h5">
                                        Log In
                                    </Typography>
                                </div>
                                <div className="register_form">
                                    <form>
                                        <div className="mt-2 text-center">

                                             <TextField 
                                                label="Phone No"
                                                id="phone_no"
                                                className=""
                                                name="phone"
                                                InputProps={{
                                                    startAdornment: <InputAdornment position="start">+91  |</InputAdornment>,
                                                }}
                                                variant="outlined"
                                                onChange={this.handleChange}
                                            />
                                        
                                        </div>
                                        <div className="mt-2">
                                            <button className="btn btn-dark btn-lg btn-block">
                                                Login
                                            </button>
                                        </div>

                                    </form>
                                    <Typography component="h3" variant="h5" align="center" style={{ color: "darkorange" }}>
                                        OR
                                    </Typography>
                                </div>
                            </Paper>
                        </Grid>                        
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default Login;

和萨斯

.body
    background-image : url("https://images.pexels.com/photos/355465/pexels-photo-355465.jpeg");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;

.signup_card
    margin-left: 25%;

.signup_header
    display: flex;
    align-items: center;
    flex-direction: column;

.logincontainer
    min-width: 80%;
    margin-top: 15%;


.signup_image
    margin-top: 25%;

.register_form
    padding: 5%;

.input_style
    width: 3rem !important;
    height: 3rem;
    font-size: 2rem;

.login_container
    justify-content: center;

标签： cssreactjssassmaterial-uireact-bootstrap