AppBar与其他元素重叠

2022-02-22 00:00:00 reactjs css material-ui appbar

我开始使用Reaction/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"文本块只有一半可见:


解决方案

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

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

例如

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;

相关文章