AppBar 与其他元素重叠

Question

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

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

但这感觉完全错误。如果我的 AppBar 具有可变高度（具体取决于图标、显示模式等）怎么办？

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

代码很简单：

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 App Bar 默认为position="fixed". 这将其与标准 DOM 布局分开，以允许内容在其下方滚动，但结果是页面上没有为其留出空间。

您可以通过将其下方的所有内容包装在 div 中并指定足够的边距，或者通过更改so it's no more 的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: 80}}>
                <Box>
                    <Typography variant='h1' style={{ border: '1px solid black' }}>
                        Hello
                    </Typography>
                </Box>
            </div>
        </div>
    )
}

export default App;

Answer 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 具有相同的高度，从而向下推其他内容。

Answer 3

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

\n

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

\n

\n

\n
1. 您可以使用position="sticky"而不是fixed。IE 11 不支持 \xe2\x9a\xa0\xef\xb8\x8f 粘性。
\n
2. 您可以渲染第二个组件
\n
3. 您可以使用 theme.mixins.toolbar CSS
\n

\n

\n

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

\n

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

\n