css 当材料UI中存在AppBar时,React应用程序中出现滚动条

sirbozc5  于 2023-02-01  发布在  React
关注(0)|答案(3)|浏览(119)

我的React应用程序中有一个非常简单的问题。如何删除页面中的滚动条?我认为这是因为我设置的高度100vh。但是,如果我删除AppBar,滚动条就会消失。我如何解决这个问题?
请检查我的代码和框在这里Click here

<div>
  <AppBar position="static">
    <Toolbar>
      <Typography variant="h6">News</Typography>
    </Toolbar>
  </AppBar>
  <Grid container component="main" className={classes.root}>
    <CssBaseline />
    <Grid item xs={false} sm={4} md={7} className={classes.image} />
    <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
          <Box mt={5}>
            <Copyright />
          </Box>
        </form>
      </div>
    </Grid>
  </Grid>
</div>
2q5ifsrm

2q5ifsrm1#

您已经为您的main节设置了height: 100vh。并且AppBar节不在main节中。如果您想删除滚动条,您需要删除AppBar的高度,即64px,当您为main节设置height时:

height: calc(100vh - 64px);
8fq7wneg

8fq7wneg2#

有两种方法可以做到这一点。
第一种方法是在material-ui Appbar中添加position="fixed"属性。它将使标题固定,其他元素将相应地调整。但是为了保持UI不变,添加填充等于Appbar高度(大约64 px)。
第二种方法是将paddingTop添加到Grid容器中,等于Appbar高度,保持position="static" prop 不变。或者另一种方法是从总高度中减去appbar高度,即:"calc(100vh - 64px)"
这里的重点是降低静态appBar的Grid容器中appbar的高度

mlmc2os5

mlmc2os53#

AppBar大小(高度)可能不总是64px,也许在您的情况下它的罚款。
就我而言

<AppBar position="sticky">

已修复此问题。
如果这在您的情况下不起作用,则可能是其他样式影响了结果。
对于上下文,我还有以下样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, #root {
    height: 100%;
    width: 100%;
}

其中**#root是ID为root**的主(根)div,React在其中呈现所有组件

ReactDOM.createRoot(document.getElementById('root'));

相关问题