css - 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;

“你好”文本 block 只有一半可见:

Answer 1

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

您可以通过将其下方的所有内容包装在一个 div 中并指定足够的边距来解决此问题，或者通过更改 position <AppBar>的属性(property)所以它不再是"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;