AppBar 与其他元素重叠答案

【问题标题】：AppBar overlaps with other elementsAppBar 与其他元素重叠
【发布时间】：2020-03-02 08:40:33
【问题描述】：

我开始使用 React/Material-UI，以及 CSS 等的新手... 我有一个带有 APPBar 的简单页面布局。不幸的是，这个 AppBar 与本应位于其下方的元素重叠。

但这感觉完全不对。如果我的 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”文本块只显示了一半：

【问题讨论】：

现在我和你有同样的问题哈哈哈你找到答案了吗？
可以，可以将AppBar位置设置为相对：<AppBar style={{ position: 'relative' }}>
我试过了，它把所有东西都往下推。但是，我再次导入 App bar 并将其放置到不同的组件上。不过谢谢！

标签： css reactjs material-ui appbar

【解决方案1】：

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

您可以通过将其下方的所有内容包装在一个 div 中并指定足够的边距来解决此问题，或者通过更改<AppBar> 的position 属性使其不再是"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: 80}}>
                <Box>
                    <Typography variant='h1' style={{ border: '1px solid black' }}>
                        Hello
                    </Typography>
                </Box>
            </div>
        </div>
    )
}

export default App;

【讨论】：

上面说明的代码不是我想要的，因为任何固定大小的 div 都不适用于可变大小的应用栏（如问题中所述）。然而，简单地改变 AppBar 的位置就可以了。所以接受这个解决方案。

【解决方案2】：

MaterialUI 为 AppBar 提供了一个可以提供帮助的主题 mixin。不确定您是否使用推荐的 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 相同的高度，并向下推其他内容。

【讨论】：

感谢您的回答。 appBarSpacer 的高度不是固定为 64px 吗？我尝试了这个选项，将项目放置在修改其高度的 AppBar 中，而 appBarSpacer 似乎没有调整？
@Will59 我刚试过这个，高度会根据应用栏的高度进行调整。应用栏高度将根据您的窗口宽度和应用栏道具/配置响应地改变高度。 编辑：我想我误解了你的评论。听起来您的应用栏高度是自定义的，这种方法不会考虑到这一点。

【解决方案3】：

根据Material-ui，这个问题有3种解决方案。

https://material-ui.com/components/app-bar/#fixed-placement

您可以使用 position="sticky" 代替固定。 ⚠️ IE 11 不支持粘性。

您可以渲染第二个组件

您可以使用 theme.mixins.toolbar CSS

我个人喜欢这样使用第二种解决方案。

  return (
    <>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </>
  );

【讨论】：

【解决方案4】：

我认为拥有一个好的应用设置是值得的，但我会推荐以下内容

import React from "react";
import ReactDOM from "react-dom";
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
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  }
}));

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>
  );
}

【讨论】：

感谢您的回答。 appBarSpacer 的高度不是固定为 64px 吗？我尝试了这个选项，将项目放置在修改其高度的 AppBar 中，而 appBarSpacer 似乎没有调整？
为什么要修改appBar的高度？
如果您想向应用栏添加徽标（不能缩小到特定大小）、更改文本大小或其他任何数量，您需要修改高度。 .

【解决方案5】：

试试这个！

const useStyles = makeStyles((theme) => ({
root: {
    flexGrow: 1,
    [theme.breakpoints.down('sm')]: {
        marginBottom: 56,
    },
    [theme.breakpoints.up('sm')]: {
        marginBottom: 64,
    },
},
menuButton: {
    marginRight: theme.spacing(1),
},
title: {
    flexGrow: 1,
}, }))

您可以像这样将上述内容添加到您的代码中

const Navbar = () => {
const classes = useStyles()
return (
    <div className={classes.root}>
        <AppBar position='fixed' color='primary'>
            <Toolbar>
                <IconButton
                    edge='start'
                    className={classes.menuButton}
                    color='inherit'
                    aria-label='menu'>
                    <MenuIcon />
                </IconButton>
                <Typography variant='h6' className={classes.title}>
                    News
                </Typography>
                <Button color='inherit'>Login</Button>
            </Toolbar>
        </AppBar>
    </div>
)}

更多文档请访问material-ui breakpoint customization

【讨论】：

请避免发布代码作为答案，因为如果没有解释，这可能无济于事。

【解决方案6】：

<AppBar position='static'>

使用它会做到这一点，内容不会隐藏在出现下

【讨论】：