如何使纸张响应 - Material Ui

Question

我正在制作一个应用程序，目前正在制作登录页面。我希望登录工具能够响应，以宽度和高度为中心。 justify-content : 'center' 对我不起作用，但它似乎可以与其他人的代码一起使用，所以我不确定问题出在哪里。

这是网站的图片

我的Body代码

<div>
  <Paper elevation={10} className={classes.root}>
    <Grid align="center">
      <h2 className={classes.title}>Log in </h2>
    </Grid>
    <form onSubmit={this.submitLogin}>
      <Paper className={classes.paper}>
        <TextField
          id="standard-basic"
          label="Email"
          name="name"
          type="text"
          value={this.state.name}
          onChange={this.handleInputChange}
          fullWidth
          required
        />
      </Paper>

      <Paper className={classes.paper}>
        <TextField
          id="standard-basic"
          label="Password"
          name="password"
          type="password"
          value={this.state.password}
          onChange={this.handleInputChange}
          fullWidth
          required
        />
      </Paper>
      <Typography className={classes.pf}>
        <Link href="">Forgot Password?</Link>
      </Typography>
      <Typography className={classes.pf}>{this.state.text}</Typography>
      <Tooltip title="Will Remember You When You Come Back">
        <FormControlLabel
          control={<Checkbox name="checkedB" color="primary" />}
          label="Remember Me"
        />
      </Tooltip>
      <Button
        type="submit"
        className={classes.log}
        onClick={this.submitLogin}
        variant="contained"
        fullWidth
      >
        LOG IN
      </Button>
    </form>

    <Typography className={classes.fp}>
      Haven't created an account?
      <Tooltip title="Go to the Sign Up page">
        <Link href="./register"> Sign Up</Link>
      </Tooltip>
    </Typography>
  </Paper>
</div>

我的主题代码

const styles = (theme) => ({
  root: {
    padding: 50,
    height: 450,
    width: 400
  },
  title: {
    fontSize: "30px"
  },
  paper: {
    marginTop: "15px"
  },
  log: {
    background: "#3f51b5",
    color: "white",
    border: "0px",
    borderRadius: "5px",
    borderColor: "grey",
    fontSize: "20px",
    height: "45px",
    marginTop: "5%"
  },
  fp: {
    marginTop: "80px",
    marginLeft: "65px"
  },
  pf: {
    marginTop: "8px"
  }
});

我找不到真正适合我的 'working' 解决方案，所以我发布了一个问题

Answer 1

将您的 Paper 组件包装在 div[=17= 中] 使用您提到的样式，应该可以按预期工作：

<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', // Change the size to fit the parent element of this div width: '100%', height: '100%', }}> <Paper> SomeStuff... </Paper> </div>

如何使纸张响应 - Material Ui

How to make paper responsive - Material Ui

reactjs

material-ui