AppBar与其他元素重叠

Question

我开始使用React / Material-UI，也是CSS的新手，等等。我有一个带有APPBar的简单页面布局。不幸的是，此AppBar与要在其下的元素重叠。

我找到了这个答案：AppBar Material UI questions

但是感觉完全不对。如果我的AppBar的高度可变，取决于图标，显示模式等，该怎么办？]

我试图创建一个垂直网格，将元素包装在不同的项目中，使顶部容器成为flex容器，并使用flex设置，似乎没有任何作用，应用程序栏始终位于文本顶部。

代码非常简单：

import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';

function App() {
    return (
        <div>
            <AppBar>
                <Typography variant='h3'>
                    AppBar
                </Typography>
            </AppBar>
            <Box>
                <Typography variant='h1' style={{ border: '1px solid black' }}>
                    Hello
                </Typography>
            </Box>
        </div>
    )
}

export default App;

“ Hello”文本块只有一半可见：

Answer 1

之所以这样，是因为MaterialUI应用栏默认为position="fixed"。这将其与标准DOM的布局分开，以允许内容在其下面滚动，但是结果是页面上没有空间。

您可以通过以下方式解决此问题：将其下的所有内容包装在div中并指定足够的边距，或者通过更改position的<AppBar>属性使其不再是"fixed"。在您的示例中，如果这是<Box>下方的唯一内容，则也可以仅将样式应用于<AppBar>。

例如

import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';

function App() {
    return (
        <div>
            <AppBar>
                <Typography variant='h3'>
                    AppBar
                </Typography>
            </AppBar>
            <div style={{marginTop: 80px}}>
                <Box>
                    <Typography variant='h1' style={{ border: '1px solid black' }}>
                        Hello
                    </Typography>
                </Box>
            </div>
        </div>
    )
}

export default App;

Answer 2

MaterialUI为可帮助的AppBar提供了主题混合。不知道您是否使用推荐的JSS设置，但是可以执行以下操作：

import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
  appBarSpacer: theme.mixins.toolbar
});

const style = withStyles(styles)

function MyScreen ({ classes }) {
  <AppBar></AppBar>
    <div className={classes.appBarSpacer}></div>
  <Box></Box>
}

export default style(MyScreen)

mixin将为该div赋予与您的AppBar相同的高度，并向下推其他内容。

Answer 3

我认为最好的应用设置是可以接受的，但我建议以下内容

import React from "react";
import {
  AppBar,
  Typography,
  Box,
  CssBaseline,
  makeStyles,
  Container,
  Grid,
  Toolbar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto"
  },
  appBarSpacer: theme.mixins.toolbar,
  title: {
    flexGrow: 1
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute">
        <Toolbar className={classes.toolbar}>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            noWrap
            className={classes.title}
          >
            AppBar
          </Typography>
        </Toolbar>
      </AppBar>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Box>
                <Typography variant="h1" style={{ border: "1px solid black" }}>
                  Hello
                </Typography>
              </Box>
            </Grid>
          </Grid>
        </Container>
      </main>
    </div>
  );
}