相关疑难解决方法(0)

我开始使用 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”文本块只有一半可见：