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